Tiles

The <Tiles> component can be used for displaying a collection of homogeneous items.

Examples

Default

If the number of tiles exceeds the specified number of columns, tiles will automatically wrap to a new line.

Tile

<Tiles columns="3">
  <Placeholder label="Tile" height="100px" />
  <Placeholder label="Tile" height="100px" />
  <Placeholder label="Tile" height="100px" />
  <Placeholder label="Tile" height="100px" />
  <Placeholder label="Tile" height="100px" />
  <Placeholder label="Tile" height="100px" />
</Tiles>

Responsive

columns is a responsive prop, so you can configure different numbers of columns on desktop and mobile displays.

Tile

Open in Playroom

<Tiles columns={{ mobile: 2, desktop: 6 }}>
  <Placeholder label="Tile" height="100px" />
  <Placeholder label="Tile" height="100px" />
  <Placeholder label="Tile" height="100px" />
  <Placeholder label="Tile" height="100px" />
  <Placeholder label="Tile" height="100px" />
  <Placeholder label="Tile" height="100px" />
</Tiles>

Collapsing

With the collapse prop, you can configure the tiles to collapse into a horizontally-scrollable list or a single-column vertical stack on mobile viewports.

Tile

Open in Playroom

<Stack dividers="1">
  <Tiles columns="6" collapse="scroll" scrollableTileWidth="200px">
    <Placeholder label="Tile" height="100px" />
    <Placeholder label="Tile" height="100px" />
    <Placeholder label="Tile" height="100px" />
    <Placeholder label="Tile" height="100px" />
    <Placeholder label="Tile" height="100px" />
    <Placeholder label="Tile" height="100px" />
  </Tiles>
  <Tiles columns="6" collapse="stack">
    <Placeholder label="Tile" height="100px" />
    <Placeholder label="Tile" height="100px" />
    <Placeholder label="Tile" height="100px" />
    <Placeholder label="Tile" height="100px" />
    <Placeholder label="Tile" height="100px" />
    <Placeholder label="Tile" height="100px" />
  </Tiles>
</Stack>

Props

<Tiles>

children

Required

ReactNode

collapse

"scroll" | "stack"

columns

Required

ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | "1" | "2" | "3" | "4" | "5" | "6">

spacing

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5">

scrollableTileWidth

string