BumblebeeBumblebee

Layout

Contents

Live demoDesignCode

Live demo

Row layout examples

Box 1

  • spacing: "base"
  • alignContent: {"x":"left","y":"center"}

Box 2

  • spacing: "base"
  • alignContent: {"x":"right","y":"center"}

Box 3

  • spacing: "base"
  • alignContent: {"x":"center","y":"center"}

Column layout examples

Box 4

  • spacing: "base"
  • alignContent: {"x":"left","y":"center"}

Box 5

  • spacing: "base"
  • alignContent: {"x":"right","y":"center"}

Box 6

  • spacing: "base"
  • alignContent: {"x":"center","y":"center"}

size layout examples

Box 7

  • size: {"minWidth":"basePos10","minHeight":"basePos10"}

Box 8

  • size: {"maxWidth":"basePos9","maxHeight":"basePos9"}
  • constrain: "clipX"

Box 6

  • spacing: "base"
  • alignContent: {"x":"center","y":"center"}

Code

import { Row, Column } from '@shieldpay/bumblebee/layout';

<Row spacing="base" alignItems={['left', 'center']}>
  {children}
</Row>

<Column spacing="base" alignItems={['left', 'center']}>
  {children}
</Column>