First Published On:
April 21, 2024
Last Updated:
April 30, 2024


Figure 1. Animation demonstrating state layer implementation.

Sections are the largest building block in your layout. They control padding for groups of content, but they don't control content width. That's what containers are for.

There are 5 base types of sections, and they range from least to most padding. The recommended variant is .section__default. It looks good on all desktops, and it automatically scales down the padding for tablet breakpoints and smaller.

Recommended Usage

Use Sections to break up your content by logical group.


Don't overwrite the existing utility classes. If you need to make a custom section, make a new class and follow this naming convention.


Resources that mention this topic

No items found.