Band (Layer 1)
Bands are level 1 container elements which represent a uniquely defined section of a page layout. Use a band on any major organizational structure on the page (such as the banner, the main content, or footer).
If you need to create a visually distinct full width section of content within a band, utilize regions.
Bands will create a 100% width block to place other content in. They should only be direct children of the <body> tag.
Within the documentation here, you can consider the entire banner area as one "band." Similarly, the sidebar and main content area are part of one band, and the footer is a separate band.
Code
<div class="band {band-background-color} {band-spacing}">
</div>
Classes
.band
Required. Defines a band container element for scripting.
{band-background-color}
Defines the background color of the band.
| Class(es) | Background Color |
|---|---|
| Default (no class) | #FFFFFF |
.accent1 or .accent-light-blue |
rgba(138, 196, 218, 0.11) |
.accent2 or .accent-light-gray |
rgba(170, 170, 170, 0.09) |
.accent3 or .accent-medium-gray |
rgba(162, 162, 162, 0.18) |
.accent4.dark or .accent-dark-gray.dark |
#222222 |
.accent5 or .accent-white |
#FFFFFF |
.accent6.dark or .accent-near-black.dark |
#121212 |
.accent7.dark or .accent-pure-black.dark |
#000000 |
{band-spacing}
Defines the top and bottom padding of the band. The amount of padding is the same.
| Class | Padding (top & bottom) |
|---|---|
| Default (no class) | 0 |
.padded-small |
15px (0-1023px) 20px (1024px and above) |
.padded-medium |
15px (0-1023px) 20px (1024-1200px) 25px (1200px and above) |
.padded |
30px (0-1023px) 40px (1024-1200px) 50px (1200px and above) |
.padded-large |
45px (0-1023px) 60px (1024-1200px) 80px (1200px and above) |
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
Bands are only to be used as direct children of the <body> tag. This includes the <main> landmark. Do not implement this as part of a component. In theory, this should only be used within a page template file.
The SCSS for the bands lives in the base2024.scss file.
Designer Notes
If you change the background color of the <body> tag as part of the design, you will also alter the color of some of the bands which rely on transparency effects