import {Tiles} from '@primer/react-brand'Examples
Default
Loading
Gridlines variant
Use the gridlines variant to display visible grid lines between tiles.
Loading
Compact layout
Use the compact layout for a denser grid with smaller tiles and more items per row.
Loading
With links
Tiles items can optionally link to external pages by providing an href prop. An arrow icon appears on hover and focus.
Loading
Component props
Tiles
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'default''gridlines' | 'default' | The visual variant of the tiles grid. |
layout | 'default''compact' | 'default' | The layout density of the tiles grid. |
Tiles.Item
| Name | Type | Default | Description |
|---|---|---|---|
name | string | undefined | The accessible name for the tile item. |
href | string | undefined | Optional URL to link the tile to. Adds an arrow icon on hover. |
children | React.ReactNode | undefined | The icon or logo to display in the tile. Typically an SVG element. |