Page Sections
The .section class can be used to group content on the page. The .section class itself has no styles associated with it, and is meant to be used as a container. It’s margin, padding, and other styles can be customized on a site-by-site basis. The .section-label and .section-title classes do have associated styles, and can be used for styling section titles.
Default Section
Label
Section Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo in bestiis erunt secreta e voluptate humanarum quaedam simulacra virtutum, in ipsis hominibus virtus nisi voluptatis causa nulla erit?
Ergo in bestiis erunt secreta e voluptate humanarum quaedam simulacra virtutum, in ipsis hominibus virtus nisi voluptatis causa nulla erit?
/* Styles for .section can be adjusted site-by-site */
.section { padding:2rem; margin-bottom:2rem; border:1px dotted #ddd; }
<div class="section">
<p class="section-label">Section Label</p>
<h2 class="section-title">Section Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
Dark Section
The .section-dark class can be used to change the color of buttons, links, and other text elements in the section to work with a dark background. By default, .section-dark uses a Brand Blue background with white text.
Label
Section Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo in bestiis erunt secreta e voluptate humanarum quaedam simulacra virtutum, in ipsis hominibus virtus nisi voluptatis causa nulla erit?
/* Styles for .section can be adjusted site-by-site */
.section { padding:2rem; margin-bottom:2rem; }
<!-- .section-dark is used to invert the colors -->
<div class="section section-dark">
<p class="section-label">Section Label</p>
<h2 class="section-title">Section Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p class="btn-group">
<a href="#" class="btn">Button</a>
<a href="#" class="btn btn-cta">CTA Button</a>
<a href="#" class="btn btn-inline">Inline Button</a>
</p>
</div>
Full-Bleed Section
The .bg-full-bleed class can be used to take the background color of the section and create a full-bleed ribbon behind it.
Label
Section One Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo in bestiis erunt secreta e voluptate humanarum quaedam simulacra virtutum, in ipsis hominibus virtus nisi voluptatis causa nulla erit?
/* Styles for .section can be adjusted site-by-site */
.section { padding:2rem; margin-bottom:2rem; }
<!-- .bg-full-bleed is used to stretch the background color full-bleed -->
<div class="section section-dark bg-full-bleed">
<p class="section-label">Section Label</p>
<h2 class="section-title">Section One Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p><a href="#" class="btn">Button</a></p>
</div>
CSS Reference
| CSS Class | Description |
|---|---|
.section |
Used for wrapping sections of content on the page. |
.section-title |
Styles main title of a section. |
.section-label |
Styles a tag or label for a section. |
.section-dark |
Adds a Brand Blue background to the section and inverts the color of text, buttons, and other elements. |
.bg-full-bleed |
Creates a pseudo-element that inherits the section’s color and stretches full-bleed behind the section. |