Documentation

Documentation

Stack

Flexbox layout primitive for spacing items in a row or a column.

The <dsgn-stack> component arranges its children in one direction with a consistent gap. Reach for it whenever a group of elements needs even spacing — it is the flexbox counterpart to <dsgn-grid>, which handles column layouts.

Usage

<dsgn-stack direction="vertical" gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</dsgn-stack>

Import the component module in your application entrypoint:

import '@ds-gn/ui/stack';

Props

Prop Type Default Description
direction 'vertical' | 'horizontal' 'vertical' Layout axis. vertical is a column, horizontal is a row.
gap 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' 'md' Space between items.
align 'start' | 'center' | 'end' | 'stretch' 'stretch' Cross-axis alignment (align-items).
wrap boolean false Allows items to wrap onto more lines. Only meaningful when horizontal.

The direction values are vertical and horizontal, not the CSS column and row. There is no justify or surface prop: the stack does not control main-axis distribution and paints no background of its own.

Slots

Slot Description
(default) Stack content.

Examples

Vertical stack

<dsgn-stack direction="vertical" gap="md">
  <dsgn-card><span slot="heading">First</span></dsgn-card>
  <dsgn-card><span slot="heading">Second</span></dsgn-card>
</dsgn-stack>

Horizontal actions

<dsgn-stack direction="horizontal" gap="sm" align="center">
  <dsgn-button appearance="solid">Save</dsgn-button>
  <dsgn-button appearance="outline">Cancel</dsgn-button>
</dsgn-stack>

Wrapping a row of badges

<dsgn-stack direction="horizontal" gap="xs" align="center" wrap>
  <dsgn-badge variant="brand">New</dsgn-badge>
  <dsgn-badge variant="accent">Beta</dsgn-badge>
  <dsgn-badge variant="success">Stable</dsgn-badge>
</dsgn-stack>

Nested stacks

<dsgn-stack direction="vertical" gap="lg">
  <dsgn-stack direction="horizontal" gap="sm" align="center">
    <dsgn-badge variant="brand">New</dsgn-badge>
    <dsgn-heading heading-size="h3">Feature title</dsgn-heading>
  </dsgn-stack>
  <dsgn-text>Feature description goes here.</dsgn-text>
</dsgn-stack>

Usage patterns

  • Use gap="none" rather than removing the stack when a layout needs items flush; it keeps the direction and alignment behavior in one place.
  • A horizontal stack does not wrap by default. Add wrap for any row that can overflow on small screens.
Esc