Stack

Edit this page Leave feedback

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.

Show editable code example

Any Paragon component or export may be added to the code example.

<Stack gap={3}>
  <Button>first button</Button>
  <Button>second button</Button>
  <Button>third button</Button>
</Stack>

<Stack gap={3}>
  <Button>first button</Button>
  <Button>second button</Button>
  <Button>third button</Button>
</Stack>

Horizontal direction

Show editable code example

Any Paragon component or export may be added to the code example.

<Stack direction="horizontal" gap={3}>
  <div className="border p-2">first block</div>
  <div className="border p-2">second block</div>
  <div className="border p-2">third block</div>
</Stack>

<Stack direction="horizontal" gap={3}>
  <div className="border p-2">first block</div>
  <div className="border p-2">second block</div>
  <div className="border p-2">third block</div>
</Stack>

Reversed props

Vertical with reversed prop

Show editable code example

Any Paragon component or export may be added to the code example.

<Stack gap={3} reversed>
  <Button>first button</Button>
  <Button>second button</Button>
  <Button>third button</Button>
</Stack>

<Stack gap={3} reversed>
  <Button>first button</Button>
  <Button>second button</Button>
  <Button>third button</Button>
</Stack>

Horizontal with reversed prop

Show editable code example

Any Paragon component or export may be added to the code example.

<Stack direction="horizontal" gap={3} reversed>
  <div className="border p-2">first block</div>
  <div className="border p-2">second block</div>
  <div className="border p-2">third block</div>
</Stack>

<Stack direction="horizontal" gap={3} reversed>
  <div className="border p-2">first block</div>
  <div className="border p-2">second block</div>
  <div className="border p-2">third block</div>
</Stack>

Theme Variables (SCSS)#

$stack-gap:                        0 !default;

Props API#

Stack Props API

children node Required
Specifies the content of the Stack.
direction enum'horizontal' | 'vertical'
Specifies direction of the children blocks (column/row).
Default'vertical'
gap number
Specifies inner space between children blocks.
Valid values are based on the spacing classes: 0, 0.5, ... 6.
Default0
reversed bool
Specifies the order of the children.
Defaultfalse
className string
Specifies an additional className to add to the base element.

Usage Insights#

Stack

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.46.3	23
frontend-app-course-authoring	20.46.2	6
frontend-app-learner-portal-enterprise	20.45.4	10
frontend-app-support-tools	20.46.0	6
frontend-lib-content-components	21.5.6	12

Edit this page Leave feedback

Paragon Design System

Theme

Stack

Basic Usage

Vertical direction

Horizontal direction

Reversed props

Theme Variables (SCSS)#

Props API#

Usage Insights#

Stack

All components (A-Z)

Theme

Stack

Basic Usage#

Vertical direction#

Horizontal direction#

Reversed props#

Theme Variables (SCSS)#

Props API#

Usage Insights#

Stack

All components (A-Z)

Basic Usage

Vertical direction

Horizontal direction

Reversed props