# dds-stack



<!-- Auto Generated Below -->


## Overview

A layout container that arranges its children along a single axis with a uniform gap and configurable alignment. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning.

## Usage

### Stack

#### Vertical and horizontal layouts

A stack places its children in a column by default. Set `direction="inline"` for a row, and `gap` to space the children evenly.

```html
<dds-stack gap="m">
  <h3>Campaign overview</h3>
  <p>Performance summary for Q1 media activations across all markets.</p>
  <p>Updated daily at 09:00 UTC.</p>
</dds-stack>
```

```html
<dds-stack direction="inline" gap="s">
  <dds-button>Save</dds-button>
  <dds-button>Cancel</dds-button>
</dds-stack>
```

#### Alignment

`justifyContent` distributes children along `direction`, and `alignItems` aligns them on the other axis. Combine them for a toolbar with a title at one end and a status at the other.

```html
<dds-stack
  direction="inline"
  justify-content="space-between"
  align-items="center"
>
  <span>Campaign results</span>
  <span>Last updated: 10 Apr 2026</span>
</dds-stack>
```

#### Wrapping

Children never wrap by default. Add `wrap` to let an inline stack flow onto further lines, and use `rowGap` and `columnGap` to space the lines and the items within a line differently. `alignContent` distributes the lines and only has an effect when `wrap` is set.

```html
<dds-stack direction="inline" wrap row-gap="xs" column-gap="m">
  <dds-chip>Strategy</dds-chip>
  <dds-chip>Creative</dds-chip>
  <dds-chip>Media</dds-chip>
  <dds-chip>Data</dds-chip>
</dds-stack>
```

#### Nesting

A stack applies one gap to all its children. For different spacing between particular children, nest stacks.

```html
<dds-stack gap="l">
  <dds-stack direction="inline" justify-content="space-between">
    <h3>Dashboard</h3>
    <span>Last updated: 10 Apr 2026</span>
  </dds-stack>
  <dds-stack direction="inline" gap="m">
    <div>Panel A</div>
    <div>Panel B</div>
    <div>Panel C</div>
  </dds-stack>
</dds-stack>
```

#### Semantics

A stack is a generic container to assistive technology. Wrap it in the element that carries the meaning, or set `role` and `aria-*` on the stack itself.

```html
<nav aria-label="Primary">
  <dds-stack direction="inline" gap="m">
    <dds-link href="/">Home</dds-link>
    <dds-link href="/campaigns">Campaigns</dds-link>
  </dds-stack>
</nav>
```

#### Sizing and spacing around a stack

A stack only lays out its children. Size it, pad it, or give it a background with ordinary CSS on the element, or put it inside `dds-card`. Style an individual child with CSS on the child, for example `flex: 1` to make it fill the free space.



## Properties

| Property         | Attribute         | Description                                                                                                     | Type                                                                                                                         | Default     |
| ---------------- | ----------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `alignContent`   | `align-content`   | How wrapped lines are distributed on the axis perpendicular to `direction`. Has no effect unless `wrap` is set. | `"baseline" \| "center" \| "end" \| "normal" \| "space-around" \| "space-between" \| "space-evenly" \| "start" \| "stretch"` | `"normal"`  |
| `alignItems`     | `align-items`     | How children align on the axis perpendicular to `direction`.                                                    | `"baseline" \| "center" \| "end" \| "normal" \| "start" \| "stretch"`                                                        | `"normal"`  |
| `columnGap`      | `column-gap`      | The space between columns, on the inline axis. Overrides the column value of `gap`.                             | `"l" \| "m" \| "none" \| "s" \| "xl" \| "xs" \| "xxs" \| undefined`                                                          | `undefined` |
| `direction`      | `direction`       | The axis children are placed along: `block` stacks them vertically, `inline` places them in a row.              | `"block" \| "inline"`                                                                                                        | `"block"`   |
| `gap`            | `gap`             | The space between children on both axes. `rowGap` and `columnGap` override it per axis.                         | `"l" \| "m" \| "none" \| "s" \| "xl" \| "xs" \| "xxs"`                                                                       | `"none"`    |
| `justifyContent` | `justify-content` | How children are distributed along `direction`.                                                                 | `"baseline" \| "center" \| "end" \| "normal" \| "space-around" \| "space-between" \| "space-evenly" \| "start" \| "stretch"` | `"normal"`  |
| `rowGap`         | `row-gap`         | The space between rows, on the block axis. Overrides the row value of `gap`.                                    | `"l" \| "m" \| "none" \| "s" \| "xl" \| "xs" \| "xxs" \| undefined`                                                          | `undefined` |
| `wrap`           | `wrap`            | Whether children flow onto the next line when they do not fit.                                                  | `boolean`                                                                                                                    | `false`     |


## Slots

| Slot | Description                         |
| ---- | ----------------------------------- |
|      | The elements arranged in the stack. |


## Dependencies

### Used by

 - [dds-card](../card)

### Graph
```mermaid
graph TD;
  dds-card --> dds-stack
  style dds-stack fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*