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 class can be applied to individual blocks on a page, or to containers to affect all blocks within it.
row.hide-on-desktop
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.
This section uses the form-section-web class to hide it on mobile devices.
This is the preset web-form-content-top preset.
This section uses the Extra class Names vc_col-lg-8 left-auto height-one-half
This section is particularly unique. It is th web-form-content bottom preset.
Use div.dy-felx-container to wrap elements that you need to line up next to each other.
Adjust the screen size to see mobile form
The section below uses the form-section-mobile class to hide this section until the screen is a certain width.
Start your dream home search now.
De Young Trailside at Loma Vista is a one-of-a-kind community located in a welcoming Loma Vista neighborhood with large lots and includes not one but two community parks with a bird watching overlook, the nearby Gould Walking Trail, and so much more, starting in $280’s.
Don’t miss out on this opportunity!
