Standard Sections

Section

Sub-heading

To highlight a row of content with extra spacing.

Paried Sections

Section (First of a Pair)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam in metus vulputate fermentum a a augue.

Section (Second of a Pair)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam in metus vulputate fermentum a a augue.

Styled Sections

Section (before Muted Section)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam in metus vulputate fermentum a a augue.

Accent Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam in metus vulputate fermentum a a augue.

Accent Section (with .container)

Combining .container directly on an .o-section caps its own width at very wide viewports (>1920px), which can expose gaps in the fake background beyond ~3160px (or try zooming out).

Muted Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam in metus vulputate fermentum a a augue.

Section (after Accent + Muted Sections)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam in metus vulputate fermentum a a augue.

Nested Sections

Section (with Nested Sections)

⚠️ These are not used in any design. They are minimally supported only to prevent layouts from breaking if accidentally used.

(Nested) Dark Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam in metus vulputate fermentum a a augue.

(Nested) Muted Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam in metus vulputate fermentum a a augue.

(Nested) Light Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam in metus vulputate fermentum a a augue.

(Nested) Accent Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam in metus vulputate fermentum a a augue.

Bordered Sections

Section (Style Light, Has Border)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam in metus vulputate fermentum a a augue.

Section (Style Muted, Has Border)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam in metus vulputate fermentum a a augue.

Section (Style Dark, Has Border)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam in metus vulputate fermentum a a augue.

Section (Style Light, Has Border) (with Nested Sections)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam in metus vulputate fermentum a a augue.

(Nested) Section (Style Muted, Has Border)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam in metus vulputate fermentum a a augue.

(Nested) Section (Style Muted, Has Border)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam in metus vulputate fermentum a a augue.

Unique Sections

Section (at Bottom of Page)

At the bottom of a CMS page: a light Section will stand out above the Footer, an accent Section will stand out above the Footer, a muted Section will stand out above the Footer, and a dark Section will visually merge with the Footer.