Add space between major blocks of content. {{render '@o-section--usage'}} A [`<section>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) is suitable for these wrappers.

> **ⓘ Notice**
>
> Default sections use margin. Styled sections use padding.

| Class (Std.)              | Class (Alt.)     | Description
| - | - | - |
| `.o-section`              | `.section`       | give extra space to content
| `.o-section--style-...`   | `.section--...`   | add full-width background
| `.o-section--style-light` | `.section--light` | __gently__ highlight content
| `.o-section--style-accent` | `.section--accent` | __brightly__ highlight content
| `.o-section--style-muted` | `.section--muted` | __clearly__ highlight content
| `.o-section--style-dark`  | `.section--dark`  | __strongly__ highlight content

Older features are not illustrated in the demo:

| Class (Old) | Description
| - | - |
| `.o-section--banner`      | has a banner image
| `.o-section--intro`       | utility to hide empty (was only used on Frontera)
| `.o-section--layout-...`  | lays out child elements (is only used on Frontera)
| `.o-section--layout-a`    | (on wider screens) 2 even columns
| `.o-section--layout-b`    | (on wider screens) 1 wide column & 1 narrow column
| `.o-section--layout-c`    | (on wider screens) 1 narrow column & 1 wide column
| `.o-section--layout-d`    | (on wider screens) 3 even columns

<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />