# Cards and tiles
Use cards for high-value links and tiles for dense visual grids, with icons, images, CTAs, arrows, and callout-style variants.
Source: /docs/components/cards-tiles
Last modified: 2026-06-20
Cards and tiles guide navigation. Use cards when a few choices need explanation. Use tiles when the reader is scanning a grid of concepts, components, platforms, or next pages.


> **Do not nest cards**
>

  A card or tile should be the surface. Do not put cards inside cards or tiles inside cards. If a section feels crowded, split it into a heading, short text, and one grid.


## Cards


### [Offers overview](/docs/offers/overview)


    Learn the checkout surface before adding identity, timers, or backend automation.


### [API reference](/docs/api/reference)


    Review endpoint headers, fields, request examples, and response examples.


```mdx title="cards.mdx"


### [Offers overview](/docs/offers/overview)


    Learn the checkout surface before adding identity or automation.


### [API reference](/docs/api/reference)


    Review endpoint headers, fields, request examples, and responses.


```

## Card variations


### Horizontal card


    Use `horizontal` when the card should read as a compact row.


### Typed warning


    Use `type` for callout-style card states.


### [Image card](/docs/api/reference)


  Use `img` when the card benefits from a real product or docs preview.


## Tiles


  - [Steps](/docs/components/steps): Sequential setup flows.
  - [Tabs](/docs/components/tabs-code-groups): Language and framework choices.
  - [API examples](/docs/components/api-fields-examples): Right-rail endpoint examples.


## Card properties


- `title` (string; required):
  The primary card heading.


- `icon` (string | URL | SVG):
  Adds a visual marker. Linked cards should almost always include one.


- `href` (string):
  Turns the card into a link.


- `horizontal` (boolean; default: false):
  Uses a compact row layout.


- `img | imgMediaId` (string):
  Adds a preview image at the top of the card.


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


- `cta` (string):
  Customizes the action text.


- `arrow` (boolean):
  Forces or hides the arrow affordance.


- `type` (info | warning | note | tip | check | danger):
  Applies callout-style color and icon treatment.


## Tile properties


- `title` (string; required):
  The tile label.


- `href` (string):
  Turns the tile into a link.


- `description` (string):
  Adds supporting text beneath the title.


- `children` (ReactNode):
  Inline tile body content. Use this when the description needs links or formatted text.


- `icon` (string | URL | SVG):
  Adds an icon. Every linked navigation tile should include one.


- `img | imgMediaId` (string):
  Adds a visual preview for component or screenshot tiles.


## Group properties


- `cols | columns` (1 | 2 | 3 | 4; default: 3):
  Sets the responsive column count for `CardGroup` or `TileGroup`.


- `gap` (sm | md | lg; default: md):
  Controls spacing between cards or tiles.


- `variant` (default | compact | layer | preview):
  Selects the tile visual treatment. Use `layer` for the Kumo-style layer cards the docs use for dense navigation grids.


## Related components


  - [Component reference](/docs/components/reference): See the full parity map and aliases.
  - [Component showcase](/docs/components/showcase): Use this for visual QA across variants.