Paragon Design System

Theme

Layout
npm_versionnpm Paragon package page

Stack

Edit this pagein a new tabLeave feedbackin a new tab

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 reversed prop

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

  • Horizontal with reversed prop

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

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 NameParagon VersionInstance Count
frontend-app-admin-portal20.46.347
frontend-app-course-authoring21.5.616
frontend-app-learner-portal-enterprise20.45.411
frontend-app-support-tools20.46.05
frontend-lib-content-components21.5.612
Edit this pagein a new tabLeave feedbackin a new tab

Contents

All components (A-Z)