Skip to main content
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.
Accordion component previewAccordion component preview (dark mode)

Accordion

Two variants
Tile example
<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.
Accordion component previewAccordion component preview (dark mode)

Accordion

Two variants

Accordion component previewAccordion component preview (dark mode)

Accordion

Two variants

Accordion component previewAccordion component preview (dark mode)

Accordion

Two variants

Grid layout example
<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

​
href
string
required
URL to navigate to when the tile is clicked.
​
title
string
The title displayed below the tile preview.
​
description
string
A short description displayed below the title.
​
children
React.ReactNode
required
Content displayed inside the tile preview area, typically images or SVGs.