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.
Properties
| Name | Values | Default |
|---|---|---|
spaceBetween (required)Array values are responsive and will change based on breakpoint | SpaceKeyArray<SpaceKey> | |
... | JSX.IntrinsicElements["div"] |
Switcher
Switcher is a flexible layout component that switches between evenly spaced horizontal and vertical layouts based on a specified threshold.
The Switcher threshold is based on container size rather than screen size which can be useful when a component may appear in different contexts.
Custom row gap
You can also specify a rowGap which will apply a different vertical gap between rows of items in the switcher then they wrap. If omitted the spaceBetween value will be used by default.
Properties
| Name | Values | Default |
|---|---|---|
threshold (required)The threshold at which the layout will switch from horizontal to vertical | String | |
spaceBetween (required)Array values are responsive and will change based on breakpoint | SpaceKeyArray<SpaceKey> | |
rowGapOptional row gap to apply to the switcher. Array values are responsive and will change based on breakpoint | SpaceKeyArray<SpaceKey> | |
... | JSX.IntrinsicElements["div"] |
Margin
Margin is a primitive layout component that is highly reusable. It allows the spacing to layout using the theme space tokens without the need to alter the style of other components.
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.
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.
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.
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.
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.
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.
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"] |