> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tile

Image-forward navigation tiles for featured destinations, launch highlights, and editorial-style section menus.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the Tile playground on holydocs.com](https://holydocs.com/components/tile).

## When to use

Use this component when the documentation itself should act like a guided product surface, not just a linear wall of text.

## Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

### Single Feature

One destination with a short supporting description under the title.

**[Configuration](/global-settings)**

Configure navigation, branding, AI features, and deployment behavior.

~~~mdx
<Tile title="Configuration" image="https://placehold.co/960x540/F4C95D/111111?text=Configuration" href="/global-settings">
  Configure navigation, branding, AI features, and deployment behavior.
</Tile>
~~~

### Editorial Trio

Use a few tiles together to anchor a higher-visibility section menu.

**[Search](/configuration/search-and-seo)**

Tune prompts, metadata, and indexing behavior.
  **[Components](/components)**

Browse every built-in MDX building block.
  **[Deployments](/deployments)**

Publish docs, previews, and production releases.

~~~mdx
<Columns cols={3}>
  <div>
    <Tile title="Search" image="https://placehold.co/960x540/93C5FD/111111?text=Search" href="/configuration/search-and-seo">
      Tune prompts, metadata, and indexing behavior.
    </Tile>
  </div>
  <div>
    <Tile title="Components" image="https://placehold.co/960x540/FDE68A/111111?text=Components" href="/components">
      Browse every built-in MDX building block.
    </Tile>
  </div>
  <div>
    <Tile title="Deployments" image="https://placehold.co/960x540/C4B5FD/111111?text=Deployments" href="/deployments">
      Publish docs, previews, and production releases.
    </Tile>
  </div>
</Columns>
~~~

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | `--` | Primary label displayed below the tile media. |
| `image` | `string` | `--` | Tile image URL. Use a strong crop because tiles are intentionally visual-first. |
| `href` | `string` | `--` | Optional destination URL for the whole tile. |

## Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

~~~mdx
<Tile title="Configuration" image="https://placehold.co/960x540/F4C95D/111111?text=Configuration" href="/global-settings">
  Configure navigation, branding, AI features, and deployment behavior.
</Tile>
~~~

## Tips

- Tiles work best in small groups of two to four. A full page of tiles usually reads like a gallery, not navigation.
- Treat the image crop as product UI, not filler art. Strong aspect ratios and recognizable screenshots matter more than decorative imagery.
- Reserve high-visibility navigation components for the few destinations you genuinely want to prioritize.

## Related Components

**[Card](/components/card)**

Versatile content containers that can display titles, icons, descriptions, and optional links.
**[CardGroup](/components/card-group)**

Responsive grid container for laying out multiple cards in even columns.
**[Panel](/components/panel)**

Place supplementary content in the right-side panel alongside your main documentation.

## More

- Interactive playground: [Tile on holydocs.com](https://holydocs.com/components/tile)
- Component library index: [/components](/components)