Use tiles to create visual showcase elements with a patterned background, title, and description. Tiles are ideal for displaying component previews, feature highlights, or navigation items in a grid layout. <Tile href="/components/accordions" title="Accordion" description="Two variants"> <img src="/images/tiles/accordion-light.svg" alt="Accordion component preview" className="block dark:hidden" /> <img src="/images/tiles/accordion-dark.svg" alt="Accordion component preview (dark mode)" className="hidden dark:block" /> </Tile>
Grid layout
Combine tiles with the columns component to create a responsive grid of visual previews. <Columns cols={3}> <Tile href="/components/accordions" title="Accordion" description="Two variants"> <img src="/images/tiles/accordion-light.svg" alt="Accordion component preview" className="block dark:hidden" /> <img src="/images/tiles/accordion-dark.svg" alt="Accordion component preview (dark mode)" className="hidden dark:block" /> </Tile> <Tile href="/components/accordions" title="Accordion" description="Two variants"> <img src="/images/tiles/accordion-light.svg" alt="Accordion component preview" className="block dark:hidden" /> <img src="/images/tiles/accordion-dark.svg" alt="Accordion component preview (dark mode)" className="hidden dark:block" /> </Tile> <Tile href="/components/accordions" title="Accordion" description="Two variants"> <img src="/images/tiles/accordion-light.svg" alt="Accordion component preview" className="block dark:hidden" /> <img src="/images/tiles/accordion-dark.svg" alt="Accordion component preview (dark mode)" className="hidden dark:block" /> </Tile> </Columns>
Properties
URL to navigate to when the tile is clicked.
The title displayed below the tile preview.
A short description displayed below the title.
Content displayed inside the tile preview area, typically images or SVGs.
