WritedocsWritedocs

Tile

View as MarkdownView this page as plain textOpen in ChatGPTAsk questions about this pageOpen in ClaudeAsk questions about this pageOpen in PerplexityAsk questions about this page
Connect to CursorUse these docs in CursorConnect to VS CodeUse these docs in VS Code

A card built around a preview image, usually laid out in a grid with Columns:

Card preview
Card component
Linkable cards with an icon or image.
Card preview
Without a link
A tile with no href.
<Columns cols={2}>
  <Tile href="/docs/content/components/card/" title="**Card** component" description="Linkable cards with an icon or image.">
    <img src="/images/card-demo.svg" alt="Card preview" />
  </Tile>
</Columns>

For a separate light and dark preview, put both images in the tile with className="block dark:hidden" and className="hidden dark:block" - only the one matching the site’s theme shows.

Tile props

hrefstring

Where the tile links to. Without it, the tile isn’t a link.

titlestring

Shown under the preview. Accepts code, **bold**, and *italic*.

descriptionstring

A short line under the title.