STYLE GUIDE

Editorial Modules
& Typography

An Editorial Toolkit for Content Planning & Design


SECTION 01

Images & Sliders


Fixed Width Images

Fixed width images are grouped so that a maximum width can be set on desktop. These should be used wherever NDC currently use 3 columns set to 25 / 50 /25. The width of the group is set, in pixels, in: Block > Layout.

BANGLES (L-R) ANITA KO, MATEO, BOOCHIER, NADA GHAZAL •  (image size-2400/1600 -1.5 Ratio)

Images Added in Columns

NDC routinely add images in 3 column blocks set to 25 / 50 / 25 width. This is not recommended for a few reasons: (1) images are too large on wider desktop windows and too small on narrow windows and tablet. (2) The width of individual images cannot be adjusted, so 4:5 images are too wide and landscape images are too small. Instead we recommend using the fixed width images (above), which give the editorial team full, granular control over the width of each image in a post on desktop.

IMAGES IN 3 COLUMNS: TOO LARGE ON BIG SCREENS  •  TOO SMALL ON TABLET. (image size-2400/1600 -1.5 Ratio)

Full Width Images

Full width images serve as visual breaks, helping to divide different sections or ideas within the post, thereby improving the flow and readability. They also give the impression that time and effort have been invested in creating the content, thus boosting its credibility. To add a full width image just make the group it’s in 100% width in the Block > Layout tab.

BANGLE CARTIER •  RING ERINESS •  SHIRT 6397 •  BRIEFS ARAKS •  TIGHTS WOLFORD  (image size-2048/976 -2.1 Ratio)

Two Column Images

There are numerous ways to add two columns of images and all of the granular settings to control the padding, can be found in the right hand Block > Styling panel. Typically these are set to 1200 or 1400px wide in the Group > Layout panel.

TORQUE DAVID WEBB •  EARRINGS MATEO •  RINGS (L) DAVID WEBB •  RINGS (R) GABRIELLE’S OWN •  BLAZER MAGDA BUTRYM (image -1×2 ratio)
TORQUE BELPERRON •  BRACELETS BELPERRON •  RING (L) BELPERRON •  RINGS (R) GABRIELLE’S OWN •  TOP LOEWE •  SKIRT NORMA KAMALI

Two Column Images — Without Spacing

Spacing can be removed by selecting the Columns element and setting the Block Spacing to 0 in the Block > Styling panel, creating a similar effect on desktop to a traditional double page spread.

 BRACELET JEMMA WYNNE • WATCH OMEGA • RING JENNA BLAKE •  TOP VINTAGE YSL (image -1×2 ratio) Please share two separate images
SKIRT LOUIS VUITTON •  SHOES UGO PAULON

Caption Left, Image RighT

One important note when adding this block is that captions have to be added in a separate Columns block, or the grey background colour extends under the right image. To adjust the quote width to perfection on desktop; simply adjust the % width of the centre column.

this is a large block quote, set to ‘H3 Editorial’ size, Ivar Display, Uppercase, with 1.3 line height and 0.2 letter spacing

please share the image separately and Text Separately with Background Colour Code
image size : 1487×1852


Infinite Slider1

These sliders are a great way to display a mix of jewelry, images, videos and quotes. The settings in the Styling tab include the option to force images to a square aspect ratio, display a carousel on mobile and add an image overlay color—which is useful when featuring jewelry shot on a white background.

All dimensions to be same| Please share Background colour code
Height is dynamic. Suggested size 762 / 953 (Size can change according to the creative/layout, Suggested size is the exact size of the Image shown) 

Heart the Stones

Megan Thee Stallion

Norman Silverman

THE LONG HISTORY
OF MEN AND JEWELRY
HAS COME BACK
IN FULL FORCE.

Buccellati

Infinite Slider2
Buccellati

Buccellati Rete D’Oro Bracelet from the Vintage Collection (image ratio -4×5)

Boucheron Bois Brûlé Diamant Necklace

Cartier Oktogon Beautés Du Monde Earrings

THE LONG HISTORY
OF MEN AND JEWELRY
HAS COME BACK
IN FULL FORCE.

Grant Mobley

Cartier Ryu Beautés Du Monde Necklace

de beers wave

De Beers Frozen Capture Earrings

van cleef arpels

Van Cleef & Arpels Sparkling Waves Necklace


Infinite Slider — Overlay Color

Adding an overlay color in the Styling tab is useful when featuring jewelry shots with a white background—to avoid these looking like they have too much whitespace.

The ‘Image overlay color’ value should be a light tint of black. The last number added is the percentage of the tint, e.g for 2% black: rgba(10,10,10,0.02).

CAPTIONS — CAPS OR SENTENCE CASE (image 4×5)

CAPTIONS — CAPS OR SENTENCE CASE

CAPTIONS — CAPS OR SENTENCE CASE

CAPTIONS — CAPS OR SENTENCE CASE

CAPTIONS — CAPS OR SENTENCE CASE


Infinite Slider — Listicles

For Listicles and Red Carpet stories the Infinite Slider can include a title, body copy and vertical captions (a toggle in the Styling settings). There are options to either display as a slider on mobile or to stack the posts vertically.

Taylor Swift

Vertical Captions — Set with a Toggle

Leading the nominations and taking home the Best Pop Award (the very first award of the night), Taylor Swift amped up her black Versace gown with layered Joseph Image size: 550×687

Selena Gomez

Vertical Captions — Set with a Toggle

Selena Gomez was a lady in red, arriving at the 2023 VMAs in a red lace Oscar de la Renta gown and ethereal Pasquale Bruni diamond floral earrings, rings, and matching bracelet, styled by Erin Walsh.

Madelyn Cline

Vertical Captions — Set with a Toggle

Outer Banks star Madelyn Cline evoked old Hollywood glamour on the VMAs red carpet ahead presenting during the ceremony, shining in 80 carats of Lorraine Schwartz diamonds. Matching her slinky champagne gown, the actress adorned the house’s Champagne Diamond Caviar Drop Earrings.

Olivia Rodrigo

Vertical Captions — Set with a Toggle

Olivia Rodrigo opted for a subtle diamond moment to go with her shimmering silver Ludovic de Saint Sernin tank gown. The GUTS artist teamed her look with Anita Ko’s classic pear diamond orbit earrings for an added touch of shine.

Chlöe Bailey

Vertical Captions — Set with a Toggle

Sporting a head-turning Roberto Cavalli gown, Chlöe Bailey took to the VMAs pink carpet in Stephanie Gottlieb jewels, including diamond drop earrings, an assortment of rings, and a diamond bracelet.

Image with Caption

This module is perfect for situations where you need three or four images, spanning the full page width on desktop and displaying as a slider on mobile.

Caption goes here
Image size 768×962
Caption goes here

In-Article Image Slider

The In-Article Slider module works well on mobile if you need a full width, simple, looping gallery of products or images without slider arrows.

CAPTION – 13PT DIA CAPS (image 1×1)

CAPTION – 13PT DIA CAPS

CAPTION – 13PT DIA CAPS


The Editorial Featured Products Slider is ideal for jewelry where four items are shown on desktop and just one on mobile. For larger product images choose the Editorial Infinite Slider module shown in the Images & Sliders section above.

The Editorial Featured Products Slider is ideal for jewelry where four items are shown on desktop and just one on mobile. For larger product images choose the Editorial Infinite Slider module shown in the Images & Sliders section above.


Two Column Cards

Fixed width images can be set to have a maximum width on desktop and, on mobile, have a small amount of padding on the left and right sides. These are used more than any other element by NDC. The width is set on the group in Block > Layout.

BUCCALLATI

La beauté plaît aux yeux,
la douceur charme l’âme

Please share the image, text and colour code separately.Ratio: 1:1 Image Size: 1252×1252


Below are a few different applications of the Editorial Featured Products Slider.
To display the slider as a grid, just click the ‘Display as static grid’ checkbox checkbox in the styling tab. A background and text colour can also be set.




SECTION 02

Videos & Covers


Default Video Module

To insert a video click + Add Block where you want the video and then select Video. If you insert a YouTube video then no settings are available. If you add a link to a video on the NDC server or Vimeo then you have options for Autoplay, Loop, Muted, Playback controls and Play Inline (plays in position rather then opening in an overlay).


Hero Media

The Editorial Hero Media module requires a mobile (usually 4:5) and desktop (usually 16:9) loop and then a mobile and desktop full video, which is played when the user clicks Play.

There are controls in the Styling section for choosing the aspect ratio for desktop and mobile, along with the background colour and Disable follow play button, which stops the play button following the users cursor on desktop. You can also disable the small, scroll down arrow, which appears at the bottom of the video when enabled.


Video Cover Block

The Cover block can be used with video whenever custom typography needs to be overlaid onto a video. This is a high impact cover option for features.

Large Title

Image size : 2048×1090


Cover with Horizontal Scroll

By adding a landscape image to a Cover module and clicking the toggle “Enable X-Axis parallax” in Settings > Mobile Settings the image will scroll from left to right on mobile as the reader scrolls down the article.

Image Size : 4143×1701


Cover with Parallax Scroll

By adding a portrait image to a Cover module and adjusting the “Custom X-Axis” slider in Settings the image will scroll at a different speed to the page itself; using a parallax effect.

DIA 14PX TITLE

Large Title

H4 subtitle with 1.4 line height.

Image Size : 2048×1090 (if possible please share the text of the HB separately)


SECTION 04

Typography, Quotes
& Headings


INTRO PARAGRAPHS

A drop cap can give readers a good first impression of the article and establishes a visual hierarchy on the page, emphasizing the beginning of the article. Drop caps have been used in manuscript design for centuries and their use can evoke a sense of editorial rigour, subtly reenforcing the link with high quality, printed magazines.


Hierarchy FOR HEADINGS

A well-defined hierarchy for headings in a digital article serves multiple purposes, benefiting not just the reader but also content creators and web developers. For the reader, a clear hierarchy enhances scan-ability and readability. Readers often skim through digital articles, and strategically placed headings help them quickly identify what each section is about, thereby improving the overall user experience.

This clarity is crucial for accessibility, as screen readers rely on headings to navigate the content, making it more inclusive for visually impaired audiences.

From a content creation and publishing standpoint, a well-structured heading hierarchy can significantly impact search engine optimization (SEO). Search engines use heading tags to better understand and index content, which can lead to higher search rankings and increased web traffic.

Below are all of the responsive heading styles available on any article on the NDC website. Please note that, below this section, we outline additional large titles, for use in Cover Stories and Features, along with options for applying title styles to copy without affecting accessibility or SEO (e.g. large quotes that aren’t titles).

This is an H1 Heading

This is an H2 Heading

This is an H3 Heading

This is an H4 Heading

This is an H5 Heading
This is an H6 Heading

NATIVE H TAGS — NO ADDITIONAL STYLES

Below are all of the native / default headings that can be selected in WordPress.
We recommend adjusting the line-height to fine tune these depending on the usage. This can be done easily in WordPress using the Typography menu in Block settings by clicking the three dots on the right and selecting Line height. Please note that, as custom width on desktop is often key on larger titles, each of the blocks of text below are contained within a table, each of which has a width set in Block > Settings.

The H1 heading sets the stage for the content.
It should be short and thematically significant.

H2 headings serve as sub-headers to break down the content under an H1 heading.

H3 headings are the third level of text breakdown and are used to introduce supporting ideas or points underneath an H2 heading. They are also used for block quotes.

H4 headings function as a subtler way to break down the content within an H3 section. They are perfect for providing additional layers of organization or for emphasizing certain points without overwhelming the reader.

H5 headings are used sparingly to delineate very specific information under an H4 section, often for technical details, footnotes, or annotations. They can also be used for introductory text on Cover Stories and Features.
Captions offer a brief explanation of images, videos and other visual elements on the page. They help contextualize the visual content for the reader and should therefore be clear and concise. These can also be used in ALL CAPS BOLD and ALL CAPS for credits.

APPLYING HEADING SIZES to Paragraphs

On occasions text needs to be resized without affecting search engines—which use the H tags (H1, H2, H3 etc) to establish the information hierarchy.

An example would be a pull-quote using the H3 font size—which is not meant to be indexed by Google as an H3 title. For this use case any typography can be styled using the presets in the settings Block > Styles > Typography > Size.

Paragraph with H1 Type Size

Paragraph with H2 Type Size

Paragraph with H3 Type Size

Paragraph with H4 Type Size

Paragraph with H5 Type Size

Paragraph With H6 Type Size Bold Text


Block Quotes

Block quotes add a touch of flair and credibility. They break up the text and highlight key insights in editorial posts and interviews. This not only improves the article’s authority but also elevates its storytelling, making it more engaging and relatable for the reader.

The simplest way to add block quotes is to cut and paste the group below. To adjust the linebreaks, whilst ensuring responsive text reflow, simply change the width of the group in the Block > Layout settings.

this is a MEDIUM block quote, set to ‘H3 Editorial’ size, Ivar Display, Uppercase, with 1.3 line height and 0.5 letter spacing.
The Group is 590 PIXELS WIDE.

this is a MEDIUM block quote, set to ‘H3 Editorial’ size, Ivar Display, Uppercase, with 1.3 line height and 0.5 letter spacing.
The Group is 590 PIXELS WIDE.

this is a SMALL block quote, set

THIS IS A LARGE BLOCK QUOTE, SET TO ‘H3 EDITORIAL’ SIZE, IVAR DISPLAY, UPPERCASE, WITH 1.3 LINE HEIGHT AND 0.2 LETTER SPACING

to ‘H4 Editorial’ size, Ivar Display, Uppercase, with 1.3 line height and 0.5 letter spacing. The Group is 500 PIXELS WIDE.


Button Styles

There are four button styles available in the NDC website theme for different use cases, all of which are responsive to mobile, tablet and desktop and can be used interchangeably. To choose the outline or solid styles, or to change the color of the button and text, go to Block > ◐ Styles.


CUSTOM HEADINGS: COVER STORIES

For cover stories and features the default header can be hidden simply by clicking the “Disable default article heading” toggle in the Post settings. A custom editorial title can then be added using the L, XL and XXL styles in Block > Styles.

‘TITLE L’ FONT SIZE

The Multifaceted
Jurnee Smollett

‘TITLE XL’ FONT SIZE

Madison Bailey Shines
Bright Like a Diamond

‘TITLE XXL’ FONT SIZE

Oh La La


Typefaces

Ivar Text and Dia are only used for body copy & captions. Ivar Display and Ivar Fine are only used at large sizes for cover stories and feature titles. Ivar Headline is perfect for all commonly used titles & headings, including H1, H2, H3, H4 and H5.

IVAR FINE

Ivar Fine for XL Titles

IVAR DISPLAY

Ivar Display
for Large Titles

IVAR HEADLINE

Ivar Headline for Editorial Headings

IVAR TEXT

Ivar Text is the default font and is used for all body copy. Vivamus lacinia odio vitae vestibulum. Donec in efficitur leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non urna in turpis suscipit facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent quam turpis, dignissim et, consequat in, porttitor eget, orci. Aenean pretium, orci vel ultrices dapibus, ipsum metus lobortis ante, ac tincidunt urna erat et tortor.

DIA

Dia is used for excerpts and captions, often in bold caps or caps. Vivamus lacinia odio vitae vestibulum. Donec in efficitur leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non urna in turpis suscipit facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent quam turpis, dignissim et, consequat in, porttitor eget, orci. Aenean pretium, orci vel ultrices dapibus, ipsum metus lobortis ante.


ADJUSTING FONTS & LINE HEIGHT

Whenever custom sizes are used for long titles, pull quotes or paragraphs, the font and line height will need to be adjusted. This is done in Block > Typography by selecting ‘Font family’ and ‘Line height’ — see examples below.

Paragraph Set to H1 Editorial Size in Ivar Fine with 1.2 Line Height

Paragraph Set to H2 Editorial Size in Ivar Display with 1.3 Line Height

Paragraph set to H3 Editorial size in Ivar Display with 1.3% line height – often used in pull quotes.

Paragraph Set to H4 Editorial size in Ivar Display with 1.3 line height – often used in pull quotes.

Paragraph Set to H5 Editorial size in Ivar Display with 1.4 line height – often used in pull quotes.

Paragraph Set to H6 Editorial Size in Ivar Display with 1.4% Line Height. Captions offer a brief explanation of images, video loops, or other visual elements on the page. They help contextualize the visual content for the reader and should therefore be clear and concise. These can also be used in ALL CAPS BOLD and ALL CAPS for credits.

Paragraph set to H3 Editorial size in Ivar Display with 1.3% line height – often used in pull quotes. Nunc blandit ligula ac sem faucibus, eget sollicitudin libero pellentesque. Nullam erat metus, viverra et tortor eu, pellentesque dignissim orci. Sed sed consequat quam, eu ornare quam. Suspendisse vel purus ac dolor eleifend fermentum sed sit amet ante. Integer et lectus et nibh suscipit auctor id nec nisi. Aenean malesuada orci odio, vitae porta dolor blandit rhoncus.

Paragraph Set to H4 Editorial size in Ivar Display with 1.3 Line Height – often used in pull quotes. — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit ligula ac sem faucibus, eget sollicitudin libero pellentesque. Nullam erat metus, viverra et tortor eu, pellentesque dignissim orci. Sed sed consequat quam, eu ornare quam. Suspendisse vel purus ac dolor eleifend fermentum sed sit amet ante. Integer et lectus et nibh suscipit auctor id nec nisi. Aenean malesuada orci odio, vitae porta dolor blandit rhoncus.

Paragraph Set to H5 Editorial size in Ivar Display with 1.4 Line Height – often used in pull quotes. — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit ligula ac sem faucibus, eget sollicitudin libero pellentesque. Nullam erat metus, viverra et tortor eu, pellentesque dignissim orci. Sed sed consequat quam, eu ornare quam. Suspendisse vel purus ac dolor eleifend fermentum sed sit amet ante. Integer et lectus et nibh suscipit auctor id nec nisi. Aenean malesuada orci odio, vitae porta dolor blandit rhoncus.

This is paragraph set to H6 Editorial size — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit ligula ac sem faucibus, eget sollicitudin libero pellentesque. Nullam erat metus, viverra et tortor eu, pellentesque dignissim orci. Sed sed consequat quam, eu ornare quam. Suspendisse vel purus ac dolor eleifend fermentum sed sit amet ante. Integer et lectus et nibh suscipit auctor id nec nisi. Aenean malesuada orci odio, vitae porta dolor blandit rhoncus.

SECTION 04

Additional Features


CUSTOM COLUMN ORDER

It is possible to set the order of any columns so that these are different to desktop when stacked on mobile. For example, when previewing the boxes below on mobile, the order is 01, 02, 03—whereas on desktop it is 03, 01, 02

03

01

02


EDITORIAL SOCIALS

Social media share icons can be added anywhere in a post using the ‘Editorial Socials’ module. A checkbox allows for the addition of custom links.


SECTION 05

Additional Modules


RELATED POSTS

The Editorial Related Posts module can be inserted anywhere in a post and provides added value to readers by directing them to additional content that complements or deepens their understanding of the topic at hand. This not only increases the time spent on the website, but also improves SEO performance, as it creates a more interconnected, easily navigable web of content that search engines view favorably.

DEFAULT BLOCK QUOTES

Block quotes add a touch of flair and credibility. They break up the text and highlight key insights in editorial posts and interviews. This not only improves the article’s authority but also elevates its storytelling, making it more engaging and relatable for the reader.

Native Block Quotes can be added to any post simply by selecting the Quote icon above any block of text.

A citation can also be added

The alternative way to add block quotes is to cut and paste the groups shown in the Typography section at the top of this page. These include the large speech marks and look better on mobile than the default quotes above.


FOOTER CREDITS

Photographer/Director: Shaniqwa Jarvis
Stylist: Thomas Christos Kikis
Hair: Larry Sims
Makeup: Fiona Stiles
Manicurist: Thuy Nguyen
Bookings Editor: Glynis Costin
Creative Production: Petty Cash Production
Director of Photography: Raj Debah
Photo Assistants: Keith Kleiner, Peter Baker, Irene Tang
Set Design: Winston Studios
Fashion Assistant: Sydney Engelhart
Tailor: Victoria Gokun