Cards and tiles — Plandalf docs

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

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

Open Offers

API reference

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

<CardGroup cols={2}>
  <Card title="Offers overview" icon="package" href="/docs/offers/overview" cta="Open Offers">
    Learn the checkout surface before adding identity or automation.
  </Card>
  <Card title="API reference" icon="braces" href="/docs/api/reference" arrow>
    Review endpoint headers, fields, request examples, and responses.
  </Card>
</CardGroup>

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

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

Open API docs

Tiles

Steps Sequential setup flows.

Tabs Language and framework choices.

API examples Right-rail endpoint examples.

Card properties

titlestringrequired

The primary card heading.

iconstring | URL | SVG

Adds a visual marker. Linked cards should almost always include one.

hrefstring

Turns the card into a link.

horizontalbooleandefault: false

Uses a compact row layout.

img | imgMediaIdstring

Adds a preview image at the top of the card.

alt | imgAltstring

Accessible alternative text for image cards.

ctastring

Customizes the action text.

arrowboolean

Forces or hides the arrow affordance.

Applies callout-style color and icon treatment.

Tile properties

titlestringrequired

The tile label.

hrefstring

Turns the tile into a link.

descriptionstring

Adds supporting text beneath the title.

childrenReactNode

Inline tile body content. Use this when the description needs links or formatted text.

iconstring | URL | SVG

Adds an icon. Every linked navigation tile should include one.

img | imgMediaIdstring

Adds a visual preview for component or screenshot tiles.

Group properties

cols | columns1 | 2 | 3 | 4default: 3

Sets the responsive column count for CardGroup or TileGroup.

gapsm | md | lgdefault: md

Controls spacing between cards or tiles.

variantdefault | compact | layer | preview

Selects the tile visual treatment. Use layer for the Kumo-style layer cards the docs use for dense navigation grids.

Component reference See the full parity map and aliases.

Component showcase Use this for visual QA across variants.