Design System

Tiles

1
<Tiles
2
    columns={3}
3
    space="large">
4
    <Placeholder height={80} />
5
    <Placeholder height={80} />
6
    <Placeholder height={80} />
7
    <Placeholder height={80} />
8
    <Placeholder height={80} />
9
    <Placeholder height={80} />
10
</Tiles>

Responsive columns

The "columns" prop accepts a responsive object. Each breakpoint falls back to the previous if not specified.

1
<Tiles
2
    columns={{ mobile: 1, tablet: 2, desktop: 3 }}
3
    space="large">
4
    <Placeholder height={80} />
5
    <Placeholder height={80} />
6
    <Placeholder height={80} />
7
    <Placeholder height={80} />
8
    <Placeholder height={80} />
9
    <Placeholder height={80} />
10
</Tiles>

Array column syntax

columns also accepts a positional array shorthand: [mobile, tablet, desktop]. This is the same value as the object form above, just written differently.

1
<Tiles
2
    columns={[1, 2, 3]}
3
    space="large">
4
    <Placeholder height={80} />
5
    <Placeholder height={80} />
6
    <Placeholder height={80} />
7
    <Placeholder height={80} />
8
    <Placeholder height={80} />
9
    <Placeholder height={80} />
10
</Tiles>

Full-width child

Use Box with gridColumn="full" to make a child span all columns in the grid, regardless of the current column count.

gridColumn=full

1
<Tiles
2
    columns={3}
3
    space="large">
4
    <Placeholder height={80} />
5
    <Placeholder height={80} />
6
    <Placeholder height={80} />
7
    <Box gridColumn="full">
8
        <Placeholder
9
            height={80}
10
            tone="info"
11
            label="gridColumn=full"
12
        />
13
    </Box>
14
    <Placeholder height={80} />
15
    <Placeholder height={80} />
16
</Tiles>