Component · Layout

Stack and inline

Stable

Two helpers space things consistently so you do not need your own margins. Stack puts items in a column with even gaps. Inline puts items in a row and wraps them onto the next line when space runs out, which matters in narrow quick views.

First

Second

Specifications

Anatomy

First

Second

1) Stack (.at-stack)

display: flex

flex-direction: column

gap: var(--at-space-5) /* 16px */

2) Inline (.at-inline)

display: flex

flex-wrap: wrap

align-items: center

gap: var(--at-space-3) /* 8px */

Size and spacing

8px gap

Stack

.at-stack gap: var(--at-space-5) /* 16px */

.at-stack--tight gap: var(--at-space-3) /* 8px */

Inline

gap: var(--at-space-3) /* 8px */

.at-inline--end: justify-content: flex-end

.at-inline--between: justify-content: space-between

Stack

Sections, cards and fields down the page. 16px between items.

Example

Section one

Section two

Tight stack

Closely related items, such as lines of a loading skeleton or a short list. 8px between items.

Example

Item

Inline, end

Buttons at the end of a form or card, main action last.

Example

Inline, between

Two things pushed to opposite ends, such as a label and a value or a count and an action.

Example

3 selected

Usage

When to use

Spacing any group of items: use these instead of margins.
Rows of buttons or tags that must wrap in narrow views.

When not to use

Rows of data with columns: use a table.
Key and value pairs: use a summary list.

Do and don't

DoInline handles the gap and wraps on small screens.

Don'tHand-set margins that do not match the scale.

Do

Put the primary button last in a button row.

Don't

Mix your own margins with stack gaps.

Implementation

HTML

<div class="at-stack">
  <div class="at-card">First</div>
  <div class="at-card">Second</div>
  <div class="at-inline at-inline--end">
    <button type="button" class="at-button">Cancel</button>
    <button type="button" class="at-button at-button--primary">Save</button>
  </div>
</div>

Classes

Class	What it does
`at-stack`	Column with 16px gaps
`at-stack--tight`	Column with 8px gaps
`at-inline`	Wrapping row with 8px gaps
`at-inline--end`	Right-aligned row
`at-inline--between`	Space between items