Section l-section

StableLayout · since 0.1.0

Vertical padding for a full-width page section.

Pick this part

Pick l-section for

Full-width bands of a page that need vertical breathing room, such as a hero or a feature row.

Pick another part for

Start with an element and add class="l-section".
Pick at most one size modifier: --sm.
Put the parts inside. The layout sets the space between them, so they need no margins.

Show markup 5 lines

<section class="l-section">
  <div class="l-container">
    <h2 class="u-margin-0">Features</h2>
  </div>
</section>

Each piece that doesn't fit was run through mcss-lite validate when this page was built. The output below is real.

Fits

Put a container inside the section for the side gutters.

Show markup 5 lines

<section class="l-section">
  <div class="l-container">
    <h2 class="u-margin-0">Features</h2>
  </div>
</section>

validate: 0 issues

Doesn't fit

Don't invent size modifiers; use l-section--sm for a tighter band.

<section class="l-section l-section--xl">
  <h2 class="u-margin-0">Features</h2>
</section>

validate

error Unknown class "l-section--xl". Did you mean "l-section--sm"? Only classes from the MCSS-Lite contracts exist. [unknown-class]

Modifiers
Class	Group	What it does
`l-section--sm`	size (pick one)	Smaller vertical padding (2.5rem instead of 4rem).