Section

Sub-heading

{{render '@o-section--usage'}}

Section (First of a Pair)

{{> @text-of-one-paragraph-with-actions }}

{{> @button-samples }}

Section (Second of a Pair)

{{> @text-of-one-paragraph-with-actions }}

{{> @button-samples }}

Section (before Muted Section)

{{> @text-of-one-paragraph-with-actions }}

{{> @button-samples }}

Accent Section

{{> @text-of-one-paragraph-with-actions }}

{{> @button-samples }}

Muted Section

{{> @text-of-one-paragraph-with-actions }}

{{> @button-samples }}

Section (after Accent + Muted Sections)

{{> @text-of-one-paragraph-with-actions }}

{{> @button-samples }}

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

{{> @text-of-one-paragraph-with-actions }}

{{> @button-samples }}

(Nested) Muted Section

{{> @text-of-one-paragraph-with-actions }}

{{> @button-samples }}

(Nested) Light Section

{{> @text-of-one-paragraph-with-actions }}

{{> @button-samples }}

(Nested) Accent Section

{{> @text-of-one-paragraph-with-actions }}

{{> @button-samples }}

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.