Section (Layer 5)

Sections are used to contain and position components and content. Generally, all content should be wrapped in a section. Sections are also necessary to position content within a column layout.

Code

Region Section (if not in a sidebar region)

<div class="section">
    <!-- Component or Content -->
</div>

Sidebar Section (if in a sidebar region)

<div class="{sidebar-type} {sidebar-placement}">
    <!-- Component or Content -->
</div>

Example Sidebar and Article

<div class="container">
    <div class="sidebar sidebar-primary">
        <!-- Sidebar content, top -->
    </div>
    <div class="article">
        <!-- Main Content -->
    </div>
</div>

Classes

{sidebar-type}

Defines the location of the section within the main content area.

For accessibility purposes, create the content in the correct reading order in DOM. Use the correct class to then position the element in the appropriate location. Do not create a scenario where the user’s focus visually flips between the sidebar area and the article area.

{sidebar-placement}

Controls the placement of this container in the provided CSS Grid for sidebars. Requires the class .sidebar to be utilized.