Paragon Design System

Technical Documentation

Theme

npm_versionnpm Paragon package page

Layout

Leave feedbackin a new tab

A wrapper component that allows to control the size of child blocks on different screen sizes. It is a shorthand for the grid system (12 columns). Also see Layout foundations.

Basic usage

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

Props API#

Layout Props API
  • children node Required
  • xs shape {
    span: enum Required0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto',
    offset: enum0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto',
    }    []
  • sm shape {
    span: enum Required0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto',
    offset: enum0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto',
    }    []
  • md shape {
    span: enum Required0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto',
    offset: enum0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto',
    }    []
  • lg shape {
    span: enum Required0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto',
    offset: enum0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto',
    }    []
  • xl shape {
    span: enum Required0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto',
    offset: enum0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto',
    }    []

Usage Insights#

Layout

Project NameParagon VersionInstance Count
frontend-app-course-authoring20.35.12
Leave feedbackin a new tab

Contents

All components (A-Z)