Tiles

Use the tiles component to display visual previews with image thumbnails, titles, and descriptions in a responsive grid layout for your docs.

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 title

Short description

Tile example

<Tile href="/your-link" title="Tile title" description="Short description">
  <img src="/images/your-preview-light.svg" alt="Tile preview" className="block dark:hidden" />
  <img src="/images/your-preview-dark.svg" alt="Tile preview (dark mode)" className="hidden dark:block" />
</Tile>

Tiles can contain any image, SVG, or other React node that you want to display in the preview area. Provide separate light and dark mode assets using the block dark:hidden and hidden dark:block utility classes so the preview matches the active theme.

The tile preview area is a fixed-height, responsive container.

Aspect ratio: Use a 16:9 or 4:3 landscape ratio.
Dimensions: Design for at least 800×450 pixels.
Format: Prefer SVG for illustrations, UI mockups, and diagrams. Use WebP or PNG for photographs and screenshots.
File size: Keep each asset under 200 KB to preserve page load performance, especially in multi-tile grids.
Padding: Include any surrounding padding in the asset. The tile does not add internal margin around the child image.

Grid layout

Combine tiles with the columns component to create a responsive grid of visual previews.

Tile one

Short description

Tile two

Short description

Tile three

Short description

Grid layout example

<Columns cols={3}>
  <Tile href="/link-one" title="Tile one" description="Short description">
    <img src="/images/preview-one-light.svg" alt="Tile preview" className="block dark:hidden" />
    <img src="/images/preview-one-dark.svg" alt="Tile preview (dark mode)" className="hidden dark:block" />
  </Tile>
  <Tile href="/link-two" title="Tile two" description="Short description">
    <img src="/images/preview-two-light.svg" alt="Tile preview" className="block dark:hidden" />
    <img src="/images/preview-two-dark.svg" alt="Tile preview (dark mode)" className="hidden dark:block" />
  </Tile>
  <Tile href="/link-three" title="Tile three" description="Short description">
    <img src="/images/preview-three-light.svg" alt="Tile preview" className="block dark:hidden" />
    <img src="/images/preview-three-dark.svg" alt="Tile preview (dark mode)" className="hidden dark:block" />
  </Tile>
</Columns>

Properties

hrefstringrequired

URL to navigate to when users click the tile.

titlestring

The title displayed below the tile preview. Supports inline Markdown formatting, such as **bold**, _italic_, and `code`.

descriptionstring

A short description displayed below the title.

childrenReact.ReactNoderequired

Content displayed inside the tile preview area, typically images or SVGs.

classNamestring

Additional CSS classes to apply to the tile.

Grid layout

Properties

On this page