# Tile

A card built around a preview image, usually laid out in a grid with [Columns](/docs/content/components/card/):

<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>
  <Tile title="Without a link" description="A tile with no href.">
    <img src="/images/card-demo.svg" alt="Card preview" />
  </Tile>
</Columns>

```mdx
<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**

<Parameter name="href" type="string">
  Where the tile links to. Without it, the tile isn't a link.
</Parameter>

<Parameter name="title" type="string">
  Shown under the preview. Accepts `code`, `**bold**`, and `*italic*`.
</Parameter>

<Parameter name="description" type="string">
  A short line under the title.
</Parameter>