Tile & TileGrid

Compact icon-led navigation tiles and a responsive grid wrapper. Denser than Card — good for menus, settings grids, and landing-page feature lists.

<Tile> is a compact alternative to <Card> — icon, title, optional one-line description, and an optional href. <TileGrid> wraps a set in an auto-fill responsive grid. Pick tiles over cards when you need density: 6–12 items on one screen instead of 3–4.

Basic grid

import { Tile, TileGrid } from '@publier/shell/components';

<TileGrid>
  <Tile title="Get started" description="Scaffold a new site in under a minute." href="/docs/get-started/installation" />
  <Tile title="Components" description="MDX primitives for authoring docs." href="/docs/components" />
  <Tile title="Theming" description="14 themes plus CSS variable overrides." href="/docs/customize/theming" />
  <Tile title="Deploy" description="Vercel, Cloudflare, Netlify, and more." href="/docs/deploy/deployment" />
</TileGrid>

Tiles with icon slot

Pass an emoji or SVG into the icon named slot for an icon-first look:

<TileGrid>
  <Tile title="Search" description="Cmd/Ctrl+K to search." href="/docs/ui-components/search-dialog">
    <span q:slot="icon">🔍</span>
  </Tile>
  <Tile title="Theming" description="14 built-in palettes." href="/docs/customize/theming">
    <span q:slot="icon">🎨</span>
  </Tile>
</TileGrid>

Denser grid

Pass minColumnWidth to pack more tiles per row:

<TileGrid minColumnWidth="140px">
  <Tile title="A" href="/a" />
  <Tile title="B" href="/b" />
  ...
</TileGrid>

Non-linked tiles

Omit href for a non-clickable presentational tile — handy for status dashboards or feature summaries where the tile itself isn’t a destination:

Props

<Tile>

An optional icon named slot renders above the title.

<TileGrid>

Accepts any children — typically <Tile> elements.

Behaviour

• CSS repeat(auto-fill, minmax(var(--publier-tile-grid-min), 1fr)) — collapses gracefully on narrow viewports.
• Linked tiles use an invisible overlay anchor (same pattern as LinkCard) — hover/click surface is the entire tile.
• Zero JavaScript.

Tile vs Card

Related

• Rich cards with a body slot → Card.
• Whole-card navigation with no icon → LinkCard.