# Stack and inline

Status: stable

Two layout helpers that space things consistently: stack (vertical) and inline (horizontal, wrapping).

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.

## Example

```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>
```

## Anatomy

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

- **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

## Variants

### Stack

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

```html
<div class="at-stack"><div class="at-card">Section one</div><div class="at-card">Section two</div></div>
```

### Tight stack

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

```html
<div class="at-stack at-stack--tight"><div class="at-card at-card--muted">Item</div><div class="at-card at-card--muted">Item</div></div>
```

### Inline, end

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

```html
<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>
```

### Inline, between

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

```html
<div class="at-inline at-inline--between"><span class="at-muted at-small">3 selected</span><button type="button" class="at-button">Clear</button></div>
```

## 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

Do: Inline handles the gap and wraps on small screens.

```html
<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>
```

Don't: Hand-set margins that do not match the scale.

```html
<div><button type="button" class="at-button">Cancel</button><button type="button" class="at-button at-button--primary" style="margin-left:3px">Save</button></div>
```

## Do

- Put the primary button last in a button row.

## Don't

- Mix your own margins with stack gaps.

## Code

```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 |

## Tokens



## Accessibility

- Keep DOM order the same as visual order.