Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

Stack

Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever. Similar to the Boostrap Stack component.

Basic Usage

Vertical direction

Horizontal direction

Theme Variables (SCSS)

$stack-gap:                       0 !default;
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
  • className
    string

    Specifies an additional className to add to the base element.

Guides

Foundations

Components

Buttonlike
Choreography
Content
Forms
Forms (deprecated)
Hooks
Imagery & Iconography
Layout
Navigation
Overlays
Status & metadata
Table

All components (A-Z)