Section

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 et magna (c-button--as-link) 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 et magna (c-button--as-link) in metus vulputate fermentum a a augue.

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 et magna (c-button--as-link) in metus vulputate fermentum a a augue.

Section (after 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 et magna (c-button--as-link) in metus vulputate fermentum a a augue.

Section (with Nested Sections)

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

Section (at Bottom of Page)

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