direction="column" will flow child items vertically, i.e. top to bottom. It is the default direction and doesn't need to be explictily set.
<dt-stack gap="200"> <dt-box> Stack item 1 </dt-box> <dt-box> Stack item 2 </dt-box> <dt-box> Stack item 3 </dt-box> </dt-stack>
direction="row" will flow child items horizontally, i.e. left to right.
<dt-stack gap="200" direction="row" > <dt-box> Stack item 1 </dt-box> <dt-box> Stack item 2 </dt-box> <dt-box> Stack item 3 </dt-box> </dt-stack>
<dt-stack gap="200" direction="row-reverse" > <dt-box> Stack item 1 </dt-box> <dt-box> Stack item 2 </dt-box> <dt-box> Stack item 3 </dt-box> </dt-stack>
<dt-stack gap="200" direction="column-reverse" > <dt-box> Stack item 1 </dt-box> <dt-box> Stack item 2 </dt-box> <dt-box> Stack item 3 </dt-box> </dt-stack>
The as prop controls which HTML element the Stack component renders as. Defaults to <div>, but can be declared as any valid HTML element to ensure semantic and accessible markup.
Declaring as an appropriate HTML element improves accessibility by helping screen readers better understand document structure, and maintainability with clear code intent.
Common as values: span, ul, ol, li, section, nav, article, main, aside, header, footer.
Use as="section" to create a thematic grouping of content.
<dt-stack as="section" gap="100" > <dt-box>Stack item 1</dt-box> <dt-box>Stack item 2</dt-box> <dt-box>Stack item 3</dt-box> </dt-stack>
Use as="span" when you need an inline container.
<dt-stack as="span" direction="row" gap="100" > <dt-box>Inline item 1</dt-box> <dt-box>Inline item 2</dt-box> <dt-box>Inline item 3</dt-box> </dt-stack>
<dt-stack gap="100"> <dt-box> Stack item 1 </dt-box> <dt-box> Stack item 2 </dt-box> <dt-box> Stack item 3 </dt-box> </dt-stack>
Size | Design Token | REM | PX |
|---|---|---|---|
| 0 | var(--dt-spacing-0) | 0rem | 0px |
| 1 | var(--dt-spacing-1) | 0.1rem | 1px |
| 25 | var(--dt-spacing-25) | 0.2rem | 2px |
| 50 | var(--dt-spacing-50) | 0.4rem | 4px |
| 75 | var(--dt-spacing-75) | 0.6rem | 6px |
| 100 | var(--dt-spacing-100) | 0.8rem | 8px |
| 125 | var(--dt-spacing-125) | 1rem | 10px |
| 150 | var(--dt-spacing-150) | 1.2rem | 12px |
| 175 | var(--dt-spacing-175) | 1.4rem | 14px |
| 200 | var(--dt-spacing-200) | 1.6rem | 16px |
| 250 | var(--dt-spacing-250) | 2rem | 20px |
| 300 | var(--dt-spacing-300) | 2.4rem | 24px |
| 350 | var(--dt-spacing-350) | 2.8rem | 28px |
| 400 | var(--dt-spacing-400) | 3.2rem | 32px |
| 450 | var(--dt-spacing-450) | 3.6rem | 36px |
| 500 | var(--dt-spacing-500) | 4rem | 40px |
| 525 | var(--dt-spacing-525) | 4.2rem | 42px |
| 550 | var(--dt-spacing-550) | 4.4rem | 44px |
| 600 | var(--dt-spacing-600) | 4.8rem | 48px |
| 650 | var(--dt-spacing-650) | 5.2rem | 52px |
| 700 | var(--dt-spacing-700) | 5.6rem | 56px |
| 750 | var(--dt-spacing-750) | 6rem | 60px |
| 800 | var(--dt-spacing-800) | 6.4rem | 64px |
The align prop controls how items are aligned along the cross-axis (perpendicular to the stack direction). For row stacks, this controls vertical alignment. For column stacks, this controls horizontal alignment.
Available align values: start, center, end, stretch, baseline.
The align prop is optional. Unless specified, it will default vertical stacks to align-items="stretch" and horizontal stacks to align-items="center".
<dt-stack gap="100"> <dt-box>Short</dt-box> <dt-box> Taller item<br> with more content </dt-box> <dt-box>Short</dt-box> </dt-stack> <dt-stack direction="row"> <dt-box>Short</dt-box> <dt-box> Taller item<br> with more content </dt-box> <dt-box>Short</dt-box> </dt-stack>
Align items to the start of the cross-axis.
<dt-stack gap="100" align="start" > <dt-box>Short</dt-box> <dt-box> Taller item<br> with more content </dt-box> <dt-box>Short</dt-box> </dt-stack> <dt-stack direction="row" gap="100" align="start" > <dt-box>Short</dt-box> <dt-box> Taller item<br> with more content </dt-box> <dt-box>Short</dt-box> </dt-stack>
Center items along the cross-axis.
<dt-stack direction="row" gap="100" align="center" > <dt-box>Short</dt-box> <dt-box> Taller item<br> with more content </dt-box> <dt-box>Short</dt-box> </dt-stack>
Align items to the end of the cross-axis.
<dt-stack gap="100" align="end" > <dt-box>Short</dt-box> <dt-box> Taller item<br> with more content </dt-box> <dt-box>Short</dt-box> </dt-stack> <dt-stack direction="row" gap="100" align="end" > <dt-box>Short</dt-box> <dt-box> Taller item<br> with more content </dt-box> <dt-box>Short</dt-box> </dt-stack>
Stretch items to fill the container height.
<dt-stack direction="row" gap="100" align="stretch" > <dt-box>Short</dt-box> <dt-box> Taller item<br> with more content </dt-box> <dt-box>Short</dt-box> </dt-stack>
Align items along their text baselines.
<dt-stack direction="row" gap="100" align="baseline" > <dt-text kind="body" :size="100">Small body</dt-text> <dt-text kind="body" :size="300">Medium body</dt-text> <dt-text kind="headline" :size="600">Large headline</dt-text> </dt-stack>
The justify prop controls how items are distributed along the main axis (the direction of the stack). For row stacks, this controls horizontal distribution. For column stacks, this controls vertical distribution.
Available justify values: start (default), center, end, space-around, space-between, space-evenly.
Align items to the start of the main axis (default).
<dt-stack justify="start"> <dt-box>Item 1</dt-box> <dt-box>Item 2</dt-box> <dt-box>Item 3</dt-box> </dt-stack>
Center items along the main axis.
<dt-stack justify="center"> <dt-box>Item 1</dt-box> <dt-box>Item 2</dt-box> <dt-box>Item 3</dt-box> </dt-stack>
Align items to the end of the main axis.
<dt-stack justify="end"> <dt-box>Item 1</dt-box> <dt-box>Item 2</dt-box> <dt-box>Item 3</dt-box> </dt-stack>
Distribute items with equal space around each item.
<dt-stack justify="space-around"> <dt-box>Item 1</dt-box> <dt-box>Item 2</dt-box> <dt-box>Item 3</dt-box> </dt-stack>
Distribute items with space between them, edges flush to container.
<dt-stack direction="row" gap="100" justify="space-between" class="d-w100p" > <dt-box>Item 1</dt-box> <dt-box>Item 2</dt-box> <dt-box>Item 3</dt-box> </dt-stack>
Distribute items with equal space between all items, including edges.
<dt-stack justify="space-evenly"> <dt-box>Item 1</dt-box> <dt-box>Item 2</dt-box> <dt-box>Item 3</dt-box> </dt-stack>
Stacks column at small screen size and column reverse at large screen
<dt-stack :direction="{ default: `row`, sm: `column`, lg: `column-reverse` }" gap="100" > <dt-box> Stack item 1 </dt-box> <dt-box> Stack item 2 </dt-box> <dt-box> Stack item 3 </dt-box> </dt-stack>
Set 200 as the default gap, 300 for small and larger, 400 for medium, 500 for large, and 600 for extra large. Learn more about how our breakpoints work in the Responsive Breakpoints documentation.
<dt-stack :gap="{ default: `200`, xl: `600`, lg: `500`, md: `400`, sm: `300` }"> <dt-box> Stack item 1 </dt-box> <dt-box> Stack item 2 </dt-box> <dt-box> Stack item 3 </dt-box> </dt-stack>
Stacks row with gap 500 and stacks in row reverse the nested stack with gap 500.
<dt-stack direction="row" as="section" gap="200" > <dt-stack> Stack item 1 </dt-stack> <dt-stack gap="200"> <dt-box>Stack item 2</dt-box> <dt-stack direction="row-reverse" gap="200" > <dt-box>Stack item 3<br>with multiple lines</dt-box> <dt-box>Stack item 4</dt-box> </dt-stack> </dt-stack> </dt-stack>
Like direction and gap, the align and justify props support responsive object syntax to change alignment at different breakpoints.
<dt-stack direction="row" gap="100" :align="{ default: `start`, md: `center`, lg: `end` }" > <dt-box>Short</dt-box> <dt-box> Taller<br> item </dt-box> <dt-box>Short</dt-box> </dt-stack>
Resize your browser to see the alignment change at different breakpoints.
<dt-stack direction="row" :justify="{ default: `start`, md: `center`, lg: `space-between` }" class="d-w100p" > <dt-box>Item 1</dt-box> <dt-box>Item 2</dt-box> <dt-box>Item 3</dt-box> </dt-stack>
Resize your browser to see the justification change at different breakpoints.
View the Migrating from Flex CSS Utilities to DtStack for more details.
<dt-stack gap="200"> <dt-stack gap="100" justify="space-between"> <dt-stack> <dt-text as="h2" kind="headline" :size="500" strength="medium" density="200" class="d-fs-400"> Katie Rodriguez </dt-text> <dt-stack direction="row" gap="350"> <dt-text tone="positive"> Available </dt-text> <dt-text>•</dt-text> <dt-text tone="tertiary"> Working from coffee shop </dt-text> </dt-stack> </dt-stack> <dt-stack gap="200"> <dt-text kind="body" :size="300" density="200" strength="semibold" tone="tertiary"> Chief Customer Success Officer </dt-text> <dt-text kind="body" :size="200" density="200"> <dt-text strength="semibold"> 6:19 am </dt-text> local time </dt-text> </dt-stack> </dt-stack> <dt-stack gap="100" direction="row" justify="space-between"> <dt-button class="d-fl1" kind="muted" importance="outlined"> <template #startIcon="{ iconSize }"> <dt-icon-phone :size="iconSize" /> </template> Call </dt-button> <dt-button class="d-fl1" kind="muted" importance="outlined"> <template #startIcon="{ iconSize }"> <dt-icon-quick-reply :size="iconSize" /> </template> Message </dt-button> <dt-button class="d-fl1" kind="muted" importance="outlined"> <template #startIcon="{ iconSize }"> <dt-icon-video :size="iconSize" /> </template> Meet </dt-button> </dt-stack> </dt-stack>
<dt-stack gap="100" class="d-w-800"> <dt-text as="h2" kind="headline" :size="400">Saturday, May 24, 2025</dt-text> <dt-stack direction="row" gap="100" class="d-w100p"> <dt-avatar full-name="Ashanti Trevor" /> <dt-stack class="d-fl1"> <dt-text kind="body" :size="200" strength="bold">Ashanti Trevor</dt-text> <dt-stack direction="row" gap="50"> <dt-stack direction="row" gap="100"> <dt-icon name="phone-outgoing" size="200" class="d-fc-tertiary" /> <dt-text kind="body" :size="100" tone="tertiary">Outgoing call</dt-text> </dt-stack> <dt-text kind="body" :size="100" tone="tertiary">•</dt-text> <dt-text kind="body" :size="100" tone="tertiary">2 minutes 10 seconds</dt-text> </dt-stack> </dt-stack> <dt-text kind="body" :size="200" tone="tertiary" numeric>3:23 pm</dt-text> <dt-badge kind="count" type="bulletin" text="6" /> </dt-stack> </dt-stack>
import { DtStack } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
default | Slot for main content |
Name
|
Default
|
Type
|
|---|---|---|
align |
"start"
|
"center"
|
"end"
|
"stretch"
|
"baseline"
The align property controls the alignment of items along the cross axis.
The align can be set to a string, or object with breakpoints.
All the undefined breakpoints will have the 'default' value.
You can override the default align with 'default' key.
In case of string, it will be applied to all the breakpoints.
If not specified, alignment uses CSS defaults: stretch for column direction,
center for row/row-reverse directions (set by CSS). | |
as | 'div' | string Set this prop to render stack as a specific HTML element. |
direction | 'column' |
"column"
|
"row"
|
"row-reverse"
|
"column-reverse"
Set this prop to the direction to stack the items.
You can override the default direction with 'default' key.
All the undefined breakpoints will have 'default' value.
By default, for the column direction it will have |
gap | '0' |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"525"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
The gap property controls the spacing between items in the stack.
The gap can be set to a string, or object with breakpoints.
All the undefined breakpoints will have the 'default' value.
You can override the default gap with 'default' key.
In case of string, it will be applied to all the breakpoints. |
justify | 'start' |
"start"
|
"center"
|
"end"
|
"space-around"
|
"space-between"
|
"space-evenly"
|
"around"
|
"between"
|
"evenly"
The justify property controls the justification of items along the main axis.
The justify can be set to a string, or object with breakpoints.
All the undefined breakpoints will have the 'default' value.
You can override the default justify with 'default' key.
In case of string, it will be applied to all the breakpoints.
The around, between, and evenly values are deprecated and will ideally be removed in the next major version.
Please use space-around, space-between, and space-evenly instead. |
Class
|
Applies to
|
Description
|
|---|
Stack documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope