Skip to content

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

Tile

Tile

Tile

Tile

Tile

Responsive

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

Tile

Tile

Tile

Tile

Tile

Tile

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

Tile

Tile

Tile

Tile

Tile


Tile

Tile

Tile

Tile

Tile

Tile

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