Layout

Various layout components that help you build responsive and flexible layouts.

Stack

Stacks are a primitive layout component that adds vertical spacing between items based on theme space tokens.


Edit live code
<Stack spaceBetween={[2, 4]}>
  <Block /* Example only */ />
  <Block /* Example only */ />
  <Block /* Example only */ />
</Stack><Stack spaceBetween={[2, 4]}>
  <Block /* Example only */ />
  <Block /* Example only */ />
  <Block /* Example only */ />
</Stack>

Horizontal Stack

Stack can also switch between an evenly spaced horizontal and vertical layouts based on a specified threshold.

This threshold is based on container size rather than screen size which can be useful when a component may appear in different contexts.


Edit live code
<Resizable>
  <Stack spaceBetween={2} horizontalAbove="600px">
    <Block /* Example only */ />
    <Block /* Example only */ />
    <Block /* Example only */ />
  </Stack>
</Resizable><Resizable>
  <Stack spaceBetween={2} horizontalAbove="600px">
    <Block /* Example only */ />
    <Block /* Example only */ />
    <Block /* Example only */ />
  </Stack>
</Resizable>

Content Stack

The ContentStack component is a wrapper around the Stack component with sensible default values for most content layouts, for example a set of cards. The ContentStack supports vertical and horizontal layouts.


Edit live code
<Resizable>
  <ContentStack>
    <Block /* Example only */ />
    <ContentStack horizontal>
      <Block /* Example only */ />
      <Block /* Example only */ />
    </ContentStack>
  </ContentStack>
</Resizable><Resizable>
  <ContentStack>
    <Block /* Example only */ />
    <ContentStack horizontal>
      <Block /* Example only */ />
      <Block /* Example only */ />
    </ContentStack>
  </ContentStack>
</Resizable>

Properties

Stack

Name	Values	Default
spaceBetween (required)Array values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
horizontalAboveThe threshold at which the layout will switch from vertical to horizontal	string
...	JSX.IntrinsicElements["div"]

ContentStack

Name	Values	Default
horizontalWhether or not the stack should switch to a horizontal layout at a standard threshold of 750px	boolean
...	JSX.IntrinsicElements["div"]

Margin

Margin is a primitive layout component that allows the use of the theme space tokens without the need to alter the style of other components.


Edit live code
<>
  <Block /* Example only */ />
  <Margin top={2}>
    <Block /* Example only */ />
  </Margin>
</><>
  <Block /* Example only */ />
  <Margin top={2}>
    <Block /* Example only */ />
  </Margin>
</>

Properties

Name	Values	Default
topArray values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
bottomArray values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
leftArray values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
rightArray values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
verticalSets top and bottom margin. Array values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
horizontalSets left and right margin. Array values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
allSets top, bottom, left, and right margin. Array values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
inlineMakes the component use inline-block	boolean
...	JSX.IntrinsicElements["div"]

Bleed

Bleed is similar to the Margin component but uses negative margins. It can be useful when working within a context that has padding.


Edit live code
<Card>
  <Bleed horizontal={[3, 4]}>
    <Block /* Example only */ />
  </Bleed>
</Card><Card>
  <Bleed horizontal={[3, 4]}>
    <Block /* Example only */ />
  </Bleed>
</Card>

Properties

Name	Values	Default
topArray values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
bottomArray values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
leftArray values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
rightArray values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
verticalSets top and bottom margin. Array values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
horizontalSets left and right margin. Array values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
allSets top, bottom, left, and right margin. Array values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
inlineMakes the component use inline-block	boolean
...	JSX.IntrinsicElements["div"]

Cluster

Cluster is used to display groups of elements that differ in length and are liable to wrap - actions that appear at the end of a form for example. When wrapping does occur, the space between the items is maintained.


Edit live code
<Resizable>
<Cluster spaceBetween={2}>
  <ClusterItem>
    <PrimaryCTAButton>Submit meter reading</PrimaryCTAButton>
  </ClusterItem>
  <ClusterItem>
    <SecondaryCTAButton>Cancel</SecondaryCTAButton>
  </ClusterItem>
</Cluster>
</Resizable><Resizable>
<Cluster spaceBetween={2}>
  <ClusterItem>
    <PrimaryCTAButton>Submit meter reading</PrimaryCTAButton>
  </ClusterItem>
  <ClusterItem>
    <SecondaryCTAButton>Cancel</SecondaryCTAButton>
  </ClusterItem>
</Cluster>
</Resizable>

Justify

You can also use the justify prop to control the alignment of the items within the cluster. This is useful for aligning items to the start, end, or center of the cluster.


Edit live code
<Resizable>
  <Cluster spaceBetween={2} justify="flex-end">
    <ClusterItem>
      <Badge variant="success">Active</Badge>
    </ClusterItem>
    <ClusterItem>
      <Badge variant="warning">Non-communicating</Badge>
    </ClusterItem>
    <ClusterItem>
      <Badge>Peak</Badge>
    </ClusterItem>
  </Cluster>
</Resizable><Resizable>
  <Cluster spaceBetween={2} justify="flex-end">
    <ClusterItem>
      <Badge variant="success">Active</Badge>
    </ClusterItem>
    <ClusterItem>
      <Badge variant="warning">Non-communicating</Badge>
    </ClusterItem>
    <ClusterItem>
      <Badge>Peak</Badge>
    </ClusterItem>
  </Cluster>
</Resizable>

Custom row gap

You can also specify a rowGap which will apply a different vertical gap between rows of items in the cluster then they wrap. If omitted the spaceBetween value will be used by default.


Edit live code
<Resizable>
  <Cluster spaceBetween={8} rowGap={2}>
    <ClusterItem>
      <PrimaryCTAButton>Submit meter reading</PrimaryCTAButton>
    </ClusterItem>
    <ClusterItem>
      <SecondaryCTAButton>Cancel</SecondaryCTAButton>
    </ClusterItem>
  </Cluster>
</Resizable><Resizable>
  <Cluster spaceBetween={8} rowGap={2}>
    <ClusterItem>
      <PrimaryCTAButton>Submit meter reading</PrimaryCTAButton>
    </ClusterItem>
    <ClusterItem>
      <SecondaryCTAButton>Cancel</SecondaryCTAButton>
    </ClusterItem>
  </Cluster>
</Resizable>

Properties

Name	Values	Default
spaceBetween (required)Array values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
rowGapOptional row gap to apply to the cluster. Array values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
justifyThe justify content property to apply to the cluster.	CSSProperties['justifyContent']
...	JSX.IntrinsicElements["div"]

Content Grid

The ContentGrid component uses CSS grid to layout content based on item size rather than media queries.

The grid will fit as many items as it can in line without going below the min size provided, and any orphaned items will match the size of the rest.


Edit live code
<Resizable>
  <ContentGrid min="22rem" spaceBetween={[3, 6]}>
    <div>
      <Dl>
      <Dt>Time Pattern Regime (TPR)</Dt>
      <Dd>00001</Dd>
      </Dl>
    </div>
    <div>
      <Dl>
      <Dt>Timing Category</Dt>
      <Dd>Anytime</Dd>
      </Dl>
    </div>
    <div>
      <Dl>
      <Dt>Meter Register ID</Dt>
      <Dd>01</Dd>
      </Dl>
    </div>
    <div>
      <Dl>
      <Dt>Number of Digits or Dials</Dt>
      <Dd>5</Dd>
      </Dl>
    </div>
    <div>
      <Dl>
      <Dt>Unit Measurement</Dt>
      <Dd>kWh</Dd>
      </Dl>
    </div>
  </ContentGrid>
</Resizable><Resizable>
  <ContentGrid min="22rem" spaceBetween={[3, 6]}>
    <div>
      <Dl>
      <Dt>Time Pattern Regime (TPR)</Dt>
      <Dd>00001</Dd>
      </Dl>
    </div>
    <div>
      <Dl>
      <Dt>Timing Category</Dt>
      <Dd>Anytime</Dd>
      </Dl>
    </div>
    <div>
      <Dl>
      <Dt>Meter Register ID</Dt>
      <Dd>01</Dd>
      </Dl>
    </div>
    <div>
      <Dl>
      <Dt>Number of Digits or Dials</Dt>
      <Dd>5</Dd>
      </Dl>
    </div>
    <div>
      <Dl>
      <Dt>Unit Measurement</Dt>
      <Dd>kWh</Dd>
      </Dl>
    </div>
  </ContentGrid>
</Resizable>

Custom row gap

You can also specify a rowGap which will apply a different vertical gap between rows of items in the content grid. If omitted the spaceBetween value will be used by default.


Edit live code
<Resizable>
  <ContentGrid min="22rem" spaceBetween={8} rowGap={2}>
    <Block />
    <Block />
    <Block />
    <Block />
    <Block />
    <Block />
  </ContentGrid>
</Resizable><Resizable>
  <ContentGrid min="22rem" spaceBetween={8} rowGap={2}>
    <Block />
    <Block />
    <Block />
    <Block />
    <Block />
    <Block />
  </ContentGrid>
</Resizable>

Properties

Name	Values	Default
min (required)The minimum size of each grid item. This will determine how many items fit in a row based on the container size.	String
spaceBetween (required)Array values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
rowGapOptional row gap to apply to the grid. Array values are responsive and will change based on breakpoint	SpaceKeyArray<SpaceKey>
...	JSX.IntrinsicElements["div"]

Row/Col grid

The Row/Col grid uses a 12-column system and allows us to use different layouts at different breakpoints - they function a little differently across the Figma and Development environments.

The 12-column approach of Row/Col grid is legacy pattern that should only be used as a last resort when the other layout components do not meet your needs.

In Figma, grids are built in as a layout grid style you can apply to your frames, this helps designers keep things aligned. In Figma we use different grids for different screen sizes.


Edit live code
<Row isNested>
  <Col medium={3} large={4}>
    <Block /* Example only */ />
  </Col>
  <Col medium={3} large={4}>
    <Block /* Example only */ />
  </Col>
  <Col medium={6} large={4}>
    <Block /* Example only */ />
  </Col>
</Row><Row isNested>
  <Col medium={3} large={4}>
    <Block /* Example only */ />
  </Col>
  <Col medium={3} large={4}>
    <Block /* Example only */ />
  </Col>
  <Col medium={6} large={4}>
    <Block /* Example only */ />
  </Col>
</Row>

By default, Row components include a max width and gutters for use as the main container of a page. This can be negated with the isNested prop.

Properties

Row

Name	Values	Default
isNestedRemoves max-width and gutters	Boolean	false
...	JSX.IntrinsicElements["div"]

Col

Set the width (in columns out of 12) that this Col should span at each breakpoint.

Name	Values	Default
spannumber of columns to span by default	Number	12
smallnumber of columns to span from 'small' and up	Number
mediumnumber of columns to span from 'medium' and up	Number
largenumber of columns to span from 'large' and up	Number
...	JSX.IntrinsicElements["div"]

Layout

Layout

Stack

Horizontal Stack

Content Stack

Properties

Stack

ContentStack

Margin

Properties

Bleed

Properties

Cluster

Justify

Custom row gap

Properties

Content Grid

Custom row gap

Properties

Row/Col grid

Properties

Row

Col

Related