The <Tiles>
component can be used for displaying a collection of homogeneous items.
If the number of tiles exceeds the specified number of columns, tiles will automatically wrap to a new line.
<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> Show code columns
is a responsive prop, so you can configure different numbers of columns on desktop and mobile displays.
<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> Show code 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.
<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> Show code
<Tiles> ResponsiveProp < 1 | 2 | 3 | 4 | 5 | 6 | "1" | "2" | "3" | "4" | "5" | "6" >
ResponsiveProp < 0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5" >