StableLayout · since 0.1.0
Vertical flow: adds space between consecutive children, which keep their own width. Bare inline children (links, spans) stack too. The default way to space components vertically.
Build it
- Start with an element and add
class="l-stack". - Pick at most one gap modifier:
--sm,--lg. - Put the parts inside. The layout sets the space between them, so they need no margins.
Billing
Your plan renews on 1 March.
Show markup 7 lines
<div class="l-stack">
<h2 class="u-margin-0">Billing</h2>
<p class="u-margin-0">Your plan renews on 1 March.</p>
<div class="l-cluster">
<button type="button" class="c-button">Change plan</button>
</div>
</div>Check your build
Each piece that doesn't fit was run through mcss-lite validate when this page was built. The output below is real.
Fits
Let the stack own the space between its children.
Billing
Your plan renews on 1 March.
Show markup 7 lines
<div class="l-stack">
<h2 class="u-margin-0">Billing</h2>
<p class="u-margin-0">Your plan renews on 1 March.</p>
<div class="l-cluster">
<button type="button" class="c-button">Change plan</button>
</div>
</div>validate: 0 issues
Doesn't fit
Don't fix spacing with margins on the children.
<div class="l-stack">
<section class="c-card" style="margin-top: 32px"><p class="u-margin-0">Plan</p></section>
</div>validate
- warning Components must not set their own margin. Wrap them in a layout primitive (l-stack, l-cluster…) instead.
[golden-rule]
Fits
Pick the gap with a modifier.
Line one
Line two
Show markup 4 lines
<div class="l-stack l-stack--sm">
<p class="u-margin-0">Line one</p>
<p class="u-margin-0">Line two</p>
</div>validate: 0 issues
Doesn't fit
Don't combine two gap modifiers.
<div class="l-stack l-stack--sm l-stack--lg">
<p class="u-margin-0">Line one</p>
</div>validate
- error "l-stack--sm" and "l-stack--lg" are both gap modifiers; use only one.
[exclusive-modifiers]
Spec sheet
| Class | Group | What it does |
|---|---|---|
l-stack--sm | gap (pick one) | Tight spacing (0.5rem), e.g. form-field internals or list items. |
l-stack--lg | gap (pick one) | Loose spacing (2rem), e.g. between page blocks. |