<PrimerStack Background="StackBackground.Default" Gap="StackGap.Gap16" Align="StackAlign.Center" Justify="StackJustify.Center">
<PrimerBox ClassName="p-3">Box 1</PrimerBox>
<PrimerBox ClassName="p-3">Box 2</PrimerBox>
</PrimerStack><PrimerStack Direction="StackDirection.Column" Gap="StackGap.Gap8" Align="StackAlign.Start" Wrap="StackWrap.Wrap" Background="StackBackground.Default">
<PrimerBox ClassName="p-3">Box 1</PrimerBox>
<PrimerBox ClassName="p-3">Box 2</PrimerBox>
<PrimerBox ClassName="p-3">Box 3</PrimerBox>
</PrimerStack><PrimerStack Direction="StackDirection.RowReverse" Justify="StackJustify.Evenly" Gap="StackGap.Gap4" Background="StackBackground.Subtle">
<PrimerLabel>Label 1</PrimerLabel>
<PrimerLabel>Label 2</PrimerLabel>
<PrimerLabel>Label 3</PrimerLabel>
</PrimerStack>Properties available for Stack component
| Name | Description | Default Value | CSS Class |
|---|---|---|---|
Direction | Flex direction of the stack | Row | flex-row, flex-column, flex-row-reverse, flex-column-reverse |
Align | Align items vertically | Stretch | flex-items-start, flex-items-center, flex-items-end, flex-items-baseline, flex-items-stretch |
Justify | Align items horizontally | Start | flex-justify-start, flex-justify-center, flex-justify-end, flex-justify-between, flex-justify-around, flex-justify-evenly |
Wrap | Flex wrapping behavior | Nowrap | flex-nowrap, flex-wrap, flex-wrap-reverse |
Gap | Spacing between items | Gap4 | gap-0, gap-1, gap-2, gap-3, gap-4, gap-5, gap-6, gap-7, gap-8, gap-9, gap-10 |
Background | Background color of the stack | null | color-bg-default, color-bg-subtle, color-bg-emphasis, color-bg-transparent, color-bg-accent, color-bg-success, color-bg-attention, color-bg-severe, color-bg-danger, color-bg-open, color-bg-done, color-bg-sponsors |
ClassName | Additional custom CSS classes | null | - |
Style | Custom inline styles | null | - |
ChildContent | Content rendered inside the stack | - | - |