Plandalf

Cards

Use Mintlify-style cards for links, icons, images, horizontal rows, CTAs, and callout-toned containers.

Cards create visual containers for links, icons, images, and grouped content. Use them when a page should promote a few important next actions, not for every list of links.

No card-in-card layouts

Cards should be individual repeated items or clear navigation choices. Do not use cards as page-section containers or put cards inside cards.

Basic card

Card title

This is how you use a card with an icon and a link. Clicking on this card brings you to the Columns page.

 
<Card title="Card title" icon="text-align-start" href="/docs/components/columns">
  This is how you use a card with an icon and a link. Clicking on this card brings you to the Columns page.
</Card>

Mintlify component pages often link to docs routes without the /docs prefix, such as /components/tabs or /create/code. Plandalf cards normalize those hrefs at render time so copied MDX keeps working without a manual rewrite.

Copied Mintlify href

This card is authored with href="/components/tabs" and renders as a link to /docs/components/tabs.

 
<Card title="Copied Mintlify href" icon="folder" href="/components/tabs">
  This card is authored with the same href shape Mintlify uses in its component overview.
</Card>

Card variations

Cards support the same main authoring patterns as Mintlify: horizontal rows, image previews, custom CTAs, arrows, icon colors, and callout-style typed cards.

Horizontal layout

Horizontal card

This is an example of a horizontal card.

<Card title="Horizontal card" icon="text-align-start" horizontal>
  This is an example of a horizontal card.
</Card>

Image cards

Plandalf API documentation screenshot

Image card

This is an example of a card with an image.

<Card title="Image card" img="/images/stacks/api-first/numi-api-docs.png" alt="Plandalf API documentation screenshot">
  This is an example of a card with an image.
</Card>

Link card

This is an example of a card with an icon and a link. Clicking on this card brings you to the Columns page.

Click here 
<Card
  title="Link card"
  icon="link"
  href="/docs/components/columns"
  arrow="true"
  cta="Click here"
>
  This is an example of a card with an icon and a link. Clicking on this card brings you to the Columns page.
</Card>

Arrow behavior

Mintlify shows arrows for external links by default. Use arrow={false} when a linked card should stay quieter, or arrow={true} when an internal link needs an explicit action cue.

External card

External links show the arrow affordance without extra props.

Quiet internal card

Internal links can suppress the arrow when the title is enough.

 
<Card title="External card" icon="arrow-up-right-from-square" href="https://www.plandalf.com" color="#0f766e">
  External links show the arrow affordance without extra props.
</Card>

<Card title="Quiet internal card" icon="link" href="/docs/components/columns" arrow={false}>
  Internal links can suppress the arrow when the title is enough.
</Card>

Imported icon sources

Mintlify cards accept icon names, icon library prefixes, local image paths, external icon URLs, and inline SVG. Plandalf routes those through the same shared icon layer used by tiles, tabs, badges, and inline icons.

Image icon card

Local SVG icon paths render inside the card icon frame.

Inline SVG icon card

Inline SVG imports preserve the icon shape without falling back to a document icon.

<Columns cols={2}>
  <Card title="Image icon card" icon="/platforms/stripe.svg" href="/docs/platforms/stripe">
    Local SVG icon paths render inside the card icon frame.
  </Card>

  <Card title="Inline SVG icon card" icon={'<svg viewBox="0 0 24 24"><path d="M12 3l7 4v5c0 4-3 7-7 9-4-2-7-5-7-9V7l7-4Z" /></svg>'}>
    Inline SVG imports preserve the icon shape.
  </Card>
</Columns>

Typed cards

Add type to style a card with the same tone as a callout. Supported types are info, warning, note, tip, check, and danger.

Note card

Use note to highlight supporting information.

Warning card

Use warning to flag potential issues.

Tip card

Use tip to share helpful suggestions.

Danger card

Use danger for destructive or risky actions.

<Card title="Note card" type="note">
  Use `note` to highlight supporting information.
</Card>

<Card title="Warning card" type="warning">
  Use `warning` to flag potential issues.
</Card>

Group cards

Use CardGroup or Columns to organize cards side by side. The grid automatically collapses on smaller screens.

First card

This is the first card.

Second card

This is the second card.

<Columns cols={2}>
  <Card title="First card" icon="panel-left-close">
    This is the first card.
  </Card>
  <Card title="Second card" icon="panel-right-close">
    This is the second card.
  </Card>
</Columns>

Start with Offers

Learn the product primitive before wiring checkout code.

Read Offers

Install the SDK

Add the browser SDK or framework package to your site.

Install SDK 
<CardGroup cols={2} variant="layer">
  <Card title="Start with Offers" icon="package" href="/docs/offers/overview" cta="Read Offers" variant="layer">
    Learn the product primitive before wiring checkout code.
  </Card>
  <Card title="Install the SDK" icon="code" href="/docs/sdk/install" cta="Install SDK" variant="layer">
    Add the browser SDK or framework package to your site.
  </Card>
</CardGroup>

Plandalf variants

Use Plandalf variants when the card needs a different job. layer works for Kumo-style link cards, compact works for dense option rows, and type turns a card into a callout-like state.

Layer card

Use for a polished next step with enough text to justify a card.

Open guide

Compact card

Use when the grid is dense and the body copy is short.

Open code groups

Typed check card

Use type for an important state that should still sit in a card grid.

<CardGroup cols={3} gap="sm" variant="layer">
  <Card title="Layer card" icon="layers" href="/docs/components/cards-tiles" cta="Open guide" variant="layer">
    Use for a polished next step with enough text to justify a card.
  </Card>
  <Card title="Compact card" icon="terminal" href="/docs/components/code-groups" cta="Open code groups" variant="compact">
    Use when the grid is dense and the body copy is short.
  </Card>
  <Card title="Typed check card" type="check">
    Use `type` for an important state that should still sit in a card grid.
  </Card>
</CardGroup>

Product image and horizontal cards

Use image cards only for real product, docs, or approved media previews. Use horizontal when the card should read as a compact row inside a comparison or setup section.

Plandalf API documentation screenshot

API reference

Pair the card with a preview only when the image helps the reader recognize the destination.

Open API docs

Implementation note

Horizontal cards are useful for compact notes, but do not use them as wrappers around other cards or tiles.

Properties

titlestring

The title displayed on the card.

iconstring

The icon to display. Plandalf accepts Lucide names, common Font Awesome or Tabler imports, image URLs, local file paths, and inline SVG strings through the shared icon layer.

iconTypestring

The Font Awesome icon style. Only used with Font Awesome-style imports.

Options: regular, solid, light, thin, sharp-solid, duotone, brands.

colorstring

Icon color as a CSS color value, such as #0f766e.

hrefstring

URL to navigate to when the card is clicked.

horizontalboolean

Display the card in a compact horizontal layout.

imgstring

URL or local path to an image displayed at the top of the card.

ctastring

Custom text for the action row.

arrowboolean

Show or hide the link arrow icon.

typestring

Apply a callout-style theme to the card. One of info, warning, note, tip, check, or danger.

Plandalf extensions

imgMediaIdstring

Media library record ID for approved Plandalf screenshots and generated assets.

alt | imgAltstring

Accessible text for the preview image.

variant"default" | "layer" | "compact"default: default

Changes card density and surface treatment. Use layer for Kumo-style linked cards and compact for denser option rows.

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

CardGroup column count. Use two for high-value choices and three or four only for short cards.

gap"sm" | "md" | "lg"default: md

CardGroup spacing between cards.

Authoring rules

  • Use cards for a few important choices, not dense catalogs.
  • Every linked card should have an icon or a meaningful image.
  • Do not put cards inside cards, panels, callouts, or other framed surfaces.
  • If every item has only a title and one sentence, use TileGroup instead.
  • Keep hover behavior local to the card. Avoid nested links inside linked cards.
Tiles Use for denser icon grids.
Navigation guide Compare cards and tiles.
Icons Pick shared icon names.

Feature detail