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.
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><div>Short</div><div>
Taller item<br>
with more content
</div><div>Short</div></dt-stack><dt-stackdirection="row"><div>Short</div><div>
Taller item<br>
with more content
</div><div>Short</div></dt-stack>
<dt-stackgap="400"align="start"><div>Short</div><div>
Taller item<br>
with more content
</div><div>Short</div></dt-stack><dt-stackdirection="row"gap="400"align="start"><div>Short</div><div>
Taller item<br>
with more content
</div><div>Short</div></dt-stack>
<dt-stackgap="400"align="end"><div>Short</div><div>
Taller item<br>
with more content
</div><div>Short</div></dt-stack><dt-stackdirection="row"gap="400"align="end"><div>Short</div><div>
Taller item<br>
with more content
</div><div>Short</div></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.
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.
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).
Valid values are 'start', 'center', 'end', 'stretch', 'baseline'.
Type:string|object
as
Set this prop to render stack as a specific HTML element.
Type:string
'div'
direction
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 justify-content: flex-start
and for the row direction align-items: center. This can be overridden
using the align and justify props.
Type:string|object
'column'
gap
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.
Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.
Type:string|object
'0'
justify
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.
Valid values are 'start', 'center', 'end', 'space-around', 'space-between', 'space-evenly'.