Tile
Image-forward navigation tiles for featured destinations, launch highlights, and editorial-style section menus.
For isolated previews, theme switching, and sandbox editing, open the Tile playground on holydocs.com .
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.
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.
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
More
- Interactive playground: Tile on holydocs.com
- Component library index: /components