# Tile

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

A visual preview card - an image on a patterned background, with a title and description.

A card built around a preview image, on a patterned background - for a gallery of templates, themes or components. Lay tiles out in a [CardGroup](https://preview.writedocs.io/docs/content/components/card/#cardgroup):

**[**Card** component](https://preview.writedocs.io/docs/content/components/card/)**

Linkable cards with an icon or image.

<img src="https://preview.writedocs.io/images/card-demo.svg" alt="Card preview" />

**Without a link**

A tile with no href.

<img src="https://preview.writedocs.io/images/card-demo.svg" alt="Card preview" />

```mdx
<CardGroup 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>
</CardGroup>
```

The preview is part of the tile, so clicking it never opens the image larger - a tile with `href` follows its link.

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 for the site's theme shows.

## Props

**`href`** `string`

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

**`title`** `string`

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

**`description`** `string`

A short line under the title.