StableLayout · since 0.1.0
Horizontal group that wraps, with a gap and vertically centered items: button groups, badge lists, tags.
Pick this part
Pick l-cluster for
- Button groups, badge lists, tags and metadata rows that should wrap on narrow screens.
Pick another part for
- Two columns of page content: use
l-sidebarorl-grid. - Items that must stay equal width: use
l-switcher.
Build it
- Start with an element and add
class="l-cluster". - Put the parts inside. The layout sets the space between them, so they need no margins.
Design
Research
Accessibility
Show markup 5 lines
<div class="l-cluster">
<span class="c-badge">Design</span>
<span class="c-badge">Research</span>
<span class="c-badge">Accessibility</span>
</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 items wrap; the gap holds on every row.
Design
Research
Accessibility
Show markup 5 lines
<div class="l-cluster">
<span class="c-badge">Design</span>
<span class="c-badge">Research</span>
<span class="c-badge">Accessibility</span>
</div>validate: 0 issues
Doesn't fit
Don't space items with margins.
<div class="l-cluster">
<button type="button" class="c-button" style="margin-right: 8px">Back</button>
<button type="button" class="c-button c-button--primary">Next</button>
</div>validate
- warning Components must not set their own margin. Wrap them in a layout primitive (l-stack, l-cluster…) instead.
[golden-rule]
Spec sheet
This part has no modifiers, elements or states.