Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

Layout

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.

  <Layout

    lg={[{ span: 4, offset: 0 }, { span: 4, offset: 0 }, { span: 4, offset: 0 }]}

    md={[{ span: 'auto', offset: 0 }, { span: 'auto', offset: 0 }, { span: 'auto', offset: 0 }]}

    sm={[{ span: 8, offset: 0 }, { span: 4, offset: 0 }, { span: 6, offset: 6 }]}

    xs={[{ span: 4, offset: 0 }, { span: 4, offset: 0 }, { span: 4, offset: 0 }]}

    xl={[{ span: 3 }, { span: 6 }, { span: 3 }]}

  >

    <Layout.Element style={{ background: 'red' }}>first block</Layout.Element>

    <Layout.Element style={{ background: 'green' }}>second block</Layout.Element>

    <Layout.Element style={{ background: 'blue' }}>third block</Layout.Element>

  </Layout>

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',
    }    []
Leave feedback

Contents

All components (A-Z)