Stack component is a layout component that stacks its children vertically or horizontally.
Default stack is using vertical direction with a gap of --dds-spacing-600 / 24px between its children.
You can set the direction to row or row-reverse to stack the children horizontally.
Horizontal stack is using the gap of --dds-spacing-200 / 8px between its children.
You can set the spacing to a custom value to adjust the space between the children. Any dds-spacing- variable number can be used.
You can add margin to the start or end of the stack by setting the startMargin or endMargin to true.
Import the component by its own subpath. This registers <dap-ds-stack> (and the
components it renders internally) and lets your bundler include only what you use:
import 'dap-design-system/components/stack'
Need a reference to the class (e.g. to register it manually or extend it)? The same subpath default-exports it:
import DapDSStack from 'dap-design-system/components/stack'
Register the whole library at once — convenient, but pulls every component into your bundle:
import 'dap-design-system'
import { DapDSStackReact } from 'dap-design-system/react'
| Property | Type | Default | Description |
|---|---|---|---|
direction | 'column', 'column-reverse' , 'row' , 'row-reverse' | 'column' | The direction of the stack. |
endMargin | boolean, undefined | false | Adds margin to the end of the stack. |
startMargin | boolean, undefined | false | Adds margin to the start of the stack. |
spacing | The spacing of the stack. Uses the system spacing scale (100, 200, 300...etc) |
| Name | Description |
|---|---|
(default) | The content of the stack. |
No custom events available.
| Part Name | Description |
|---|---|
stack | The main stack container. |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-stack::part(stack) {
/* Your custom styles */
}
Example usage:
<dap-ds-stack class="my-custom-dap-ds-stack">
Stack
</dap-ds-stack>
.my-custom-dap-ds-stack::part(stack) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
No CSS custom properties available.
