# Tiles
Use tiles for dense icon grids, component catalogs, and compact next-page navigation.
Source: /docs/components/tiles
Last modified: 2026-06-20
Tiles are lighter than cards. Use them when the reader needs to scan many related destinations quickly.


> **Linked tiles need icons**
>

  The docs audit checks linked tile surfaces for icons. Use a meaningful icon rather than letting the fallback renderer hide an authoring gap.


## Icon grid

Mintlify tiles can use child media as the preview area. Use this for component previews, screenshots, or approved docs assets.


### [Accordion](/docs/components/accordions)

Two variants


  ![Checkout element palette preview](/images/features/checkout-templates/checkout-elements-palette-product.png)


```mdx title="tile-preview-child.mdx"

### [Accordion](/docs/components/accordions)

Two variants


  ![Checkout element palette preview](/images/features/checkout-templates/checkout-elements-palette-product.png)


```

## Light and dark previews

Imported Mintlify tiles often include separate light and dark preview images. Plandalf preserves the pasted `className` attributes and renders them as normal HTML `class` attributes.


### [Accordion](/docs/components/accordions)

Two variants


  ![Accordion component preview](/images/features/checkout-templates/checkout-elements-palette-product.png)
  ![Accordion component preview (dark mode)](/images/stacks/api-first/numi-api-docs.png)


```mdx title="tile-light-dark-preview.mdx"

### [Accordion](/docs/components/accordions)

Two variants


  ![Accordion component preview](/images/features/checkout-templates/checkout-elements-palette-product.png)
  ![Accordion component preview (dark mode)](/images/stacks/api-first/numi-api-docs.png)


```

### Imported Mintlify links

Tiles normalize copied Mintlify docs-base hrefs the same way cards do. A tile authored with `/components/cards` points to the public Plandalf route `/docs/components/cards`, and `/create/code` points to `/docs/create/code`.

- [Copied Mintlify href](/components/cards): Renders as /docs/components/cards.

```mdx title="mintlify-tile-link.mdx"
- [Copied Mintlify href](/components/cards): Renders as /docs/components/cards.
```

## Grid layout

Combine tiles with `Columns` or `TileGroup` to create a responsive grid of visual previews.


### [Accordion](/docs/components/accordions)

Two variants


    ![Checkout element palette preview](/images/features/checkout-templates/checkout-elements-palette-product.png)


### [Card](/docs/components/cards)

Link containers


    ![Plandalf API documentation preview](/images/stacks/api-first/numi-api-docs.png)


### [Tabs](/docs/components/tabs)

Switchable panels


    ![Plandalf API keys preview](/images/stacks/api-first/numi-api-keys.png)


```mdx title="tile-grid-layout.mdx"


### [Accordion](/docs/components/accordions)

Two variants


    ![Checkout element palette preview](/images/features/checkout-templates/checkout-elements-palette-product.png)


### [Card](/docs/components/cards)

Link containers


    ![Plandalf API documentation preview](/images/stacks/api-first/numi-api-docs.png)


### [Tabs](/docs/components/tabs)

Switchable panels


    ![Plandalf API keys preview](/images/stacks/api-first/numi-api-keys.png)


```

## Plandalf icon grid


  - [Offers](/docs/offers/overview): Understand the sale primitive.
  - [SDK install](/docs/sdk/install): Add Plandalf to a site.
  - [API reference](/docs/api/reference): Build server-side flows.


```mdx title="icon-grid.mdx"

  - [Offers](/docs/offers/overview): Understand the sale primitive.
  - [SDK install](/docs/sdk/install): Add Plandalf to a site.
  - [API reference](/docs/api/reference): Build server-side flows.

```

## Layer cards

Use `variant="layer"` when the grid is a Kumo-style layer picker: compact, glassy, and meant for scanning.


  - [Install](/docs/sdk/install): Add the package.
  - [Configure](/docs/sdk/configure): Choose mode.
  - [Listen](/docs/sdk/events): Handle events.
  - [Gate](/docs/sdk/gates): Control access.


```mdx title="layer-tiles.mdx"

  - [Install](/docs/sdk/install): Add the package.
  - [Configure](/docs/sdk/configure): Choose mode.
  - [Listen](/docs/sdk/events): Handle events.
  - [Gate](/docs/sdk/gates): Control access.

```

## Preview tiles

Use image tiles only when the preview adds useful context. Keep the text short so the grid does not become a second article.


  - [Checkout block](/docs/components/reference#api-docs): Show a real interface or approved documentation asset.
  - [API surface](/docs/api/reference): Pair the preview with a clear destination.


## Properties


- `href` (string; required):
  URL to navigate to when users click the tile.


- `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.


## Plandalf extensions


- `icon` (string):
  Icon shown beside the tile label. Required for linked tile grids in reviewed Plandalf docs, even when the tile also has preview media.


- `iconType` (string):
  Compatibility prop for imported Font Awesome-style icon metadata.


- `variant` ("auto" | "preview" | "compact" | "layer"; default: auto):
  `auto` chooses a preview layout when media exists. `compact` works best inside layer groups.


- `preview` (boolean; default: false):
  Forces the preview layout when the tile body is not image-like enough to be detected automatically.


- `img | imgMediaId` (string):
  Optional media preview from a public path or approved media library record.


- `alt | imgAlt` (string):
  Accessible text for image previews.


- `color` (string):
  Optional accent color for icon-led tiles.


- `cols | columns` (1 | 2 | 3 | 4; default: 3):
  `TileGroup` column count. Four-column grids collapse to two columns before mobile.


- `gap` ("sm" | "md" | "lg"; default: md):
  `TileGroup` spacing. Use `sm` for dense catalogs.


## Authoring rules

- Use tiles for catalogs, related pages, and next-step choices.
- Use cards when each item needs more explanation, badges, or longer body copy.
- Give every linked tile an icon, even when the tile also has an image.
- Keep titles short. Move context into `description` or the destination page.

## Related components


  - [Cards](/docs/components/cards): Use for heavier next steps.
  - [Icons](/docs/components/visual-context#icons): Pick shared icon names.
  - [Navigation guide](/docs/components/cards-tiles): Compare cards and tiles.