Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever. Similar to the Bootstrap Stack component.
Basic Usage
Vertical direction
Stacks are vertical by default and stacked items are full-width by default. Watch this pull request to see more details about the auto stretching behavior.
Any Paragon component or export may be added to the code example.
Horizontal direction
Any Paragon component or export may be added to the code example.
Reversed props
- Vertical with
reversedprop
Any Paragon component or export may be added to the code example.
- Horizontal with
reversedprop
Any Paragon component or export may be added to the code example.
Theme Variables#
| CSS Variable | Computed Value |
|---|---|
| | |
| | |
| | |
| | |
| | |
Props API#
- children
nodeRequiredSpecifies the content of the
Stack. - direction
enum'horizontal' | 'vertical'Default'vertical'Specifies direction of the children blocks (column/row).
- gap
numberDefault0Specifies inner space between children blocks.
Valid values are based on
the spacing classes:0, 0.5, ... 6. - reversed
boolDefaultfalseSpecifies the order of the children.
- className
stringSpecifies an additional
classNameto add to the base element.
Usage Insights#
Stack
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-admin-portal | 21.13.1 | 67 | |
| frontend-app-course-authoring | 22.8.1 | 79 | |
| frontend-app-enterprise-public-catalog | 21.13.1 | 2 | |
| frontend-app-learner-portal-enterprise | 21.13.1 | 29 | |
| frontend-app-support-tools | 21.13.1 | 12 | |
| prospectus | 20.46.2 | 1 |