Region (Layer 2)

Regions are level 2 container blocks which are used to hold components or other user-placeable containers. They are implemented either within the <main> tag, or within a band. Regions are also used to add top and bottom padding for the inner contents.

Code

<div class="region {region-background-color} {region-sidebar} {sidebar-location} {sidebar-tint} {region-spacing} {region-text-color}">
    <!-- Container Element -->
</div>

Classes

{region-background-color}

Modifies the background color for the region.

Class Background Color
Default (no class) White (#FFFFFF)
.black Black (#222222)
.navy Navy Blue (#073949)
.red Carnelian Red (#B31B1B)

{region-sidebar}

Adds a sidebar to the region of the page.

Class Description
Default (no class) Without adding any classes, there will be no sidebar in the region.
.region-sidebar This will add support for a sidebar within the region.

{region-spacing}

Defines the amount of top and bottom padding the region will have by default.

Class Padding (top & bottom)
Default (no class) 0
.padded 30px (0-1023px)
40px (1024-1200px)
50px (1200px and above)

{region-text-color}

Defines the text color for the region.

Class Description
Default The container will have a white background. Text inside will be black.
.dark The container text will become white.
Important: Use this with Navy, Black, or Carnelian Red options for web accessibility.
Requires .region-sidebar to be added and further modifications to the section layer.

Sets the sidebar's location to the right or to the left of the content area.

Class Description
Default (no class) The sidebar will be left-oriented.
.sidebar-left Explicitly positions the sidebar on the left of the article (primary content).
.sidebar-right Explicitly positions the sidebar on the right of the article.
Requires .region-sidebar to be added and further modifications to the section layer.

Defines if the sidebar will have a slightly shaded background or not.

Class Description
Default (no class) The background color will not be defined in the sidebar area.
.sidebar-tint Adds a light shade to the sidebar area.

Accessibility Expectations

Modality Expected Behavior (Collapsed) Criterion
Visual The color contrast of small text against the background color must be 4.5:1 1.4.3
Visual The color contrast of large text against the background color must be 3:1 1.4.3

Developer Notes

Any custom components should be added to regions.