De Young: Style Guide

Standard Text Formats

h1: First Level Heading

h2: Second Level Heading

h3: Third Level Heading

h4: Fourth Level Heading

h5: Fifth Level Heading
h6: Sixth Level Heading

p: Normal paragraph

blockquote: Quoted Text

Custom Text Formats

h1.page-title: Page Title

p.intro-text: Introdutory paragraph.

h2.drop-shadow: Title with Drop Shadow

To better display the effect above, the text is over a bright image and with white text. These are not part of the class. This class can also be applied to any text format, not just titles.

Custom Block Formats

row.hide-on-mobile

This line will be hidden on mobile devices.

This class can be applied to individual blocks on a page, or to containers to affect all blocks within it.

row.hide-on-desktop

This line will be hidden on desktop devices.

This class can be applied to individual blocks on a page, or to containers to affect all blocks within it.

row.shadow

A normal title

An intro-text: this row is surrounded by a subtle shadow, and features a blue line at the bottom edge.

Blocks with white background and shadow are usually set to a fixed width on desktop for a “card” visual effect. The card effect requires the following settings under the Design Options for that block:

  • Left and Right Margins = 0 (zero): prevents the standard behavior that set margins to negative values to make them full-width on mobile devices.
  • Left and Right Paddings = 5%: set internal paddings to card relative to the current block width, for small paddings on mobile devices and larger on desktops.

row.shadow-container

To enable the correct width for .shadow-column within this container, the row itself must have a .shadow-container class.

column.shadow-column

This column is surrounded by a subtle shadow, and features a blue line at the bottom edge.

Blocks with white background and shadow are usually set to a fixed width on desktop for a “card” visual effect.

row.white-text

A page-title

An intro-text: All text within this block is set to white.

Rows with dark background are usually set to be full width on all platforms.

Row with photo background

The background image should be set under the Design Options tab for the row. Below the image there is a dropdown that normally shows “Theme Defaults”; this dropdown should be set to “Cover“, to make the image fit inside the box without repeating or excessively crop.

This row also includes the .white-text format for example. This is not required, and it should be implemented according to the image being used for background.