Section

When to use it

The Section component is used to create large "billboards" or content sections on a page. It is commonly used to group related content and provide a visually distinct area within a layout.

Variants

• Full Height: Use the .c-section--full modifier to make the section 100% height.
• Two Thirds Height: Use the .c-section--twothirds modifier to make the section 2/3 height.
• Half Height: Use the .c-section--half modifier to make the section 50% height.
• One Third Height: Use the .c-section--onethird modifier to make the section 1/3 height.
• Horizontal Layout: Use the .c-section__body--horizontal modifier to enable multiple section bodies side by side.
• Full Width and Height: Use the .c-section__body--full modifier to make the section body stretch to the full section width and height.
• Top Aligned: Use the .c-section__body--top modifier to top-align the section body.
• Narrow Width: Use the .c-section__body--narrow modifier to make the section body narrower.

INFO

The color variants in the examples below depend on color utility classes whose names vary with the theme (light or dark mode). If you want to handle coloring more consistently (or with other color variables), consider adding product specific class attributes and style those instead.

What it looks like

Code examples

Basic Section

<section class="c-section">
    <div class="c-section__body">
        Default
    </div>
</section>

Half

<section class="c-section c-section--half u-color-blue-darkest">
    <div class="c-section__body c-section__body--top">
        <h2 class="c-section__title u-text--center">Section title</h2>
        Half height, top aligned, with section title
    </div>
</section>

Half, narrow

<section class="c-section c-section--half u-color-grey-darkest">
    <div class="c-section__body c-section__body--narrow">
        half, narrow body width
    </div>
</section>

1/3, narrow

<section class="c-section c-section--onethird u-color-white">
    <div class="c-section__body c-section__body--narrow">
        1/3, narrow body width
    </div>
</section>

2/3

<section class="c-section c-section--twothirds u-color-grey-base">
    <div class="c-section__body c-section__body--full">
        2/3, full body width
    </div>
</section>

Accessibility notes

The Section component is preferably used together with a <section> element (the c-section is more a "hint" here, not a requirement). However, although the <section> specifies an explicit "section" in the document outline, the meaningful elements are in fact the headings (<h2> etc) which does the job of indicating a new section of content.