# Cards Use Mintlify-style cards for links, icons, images, horizontal rows, CTAs, and callout-toned containers. Source: /docs/components/cards Last modified: 2026-06-20 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](/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. ```mdx title="card-basic.mdx" ### [Card title](/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. ``` ### Imported Mintlify links 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](/components/tabs) This card is authored with `href="/components/tabs"` and renders as a link to `/docs/components/tabs`. ```mdx title="mintlify-card-link.mdx" ### [Copied Mintlify href](/components/tabs) This card is authored with the same href shape Mintlify uses in its component overview. ``` ## 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. ```mdx title="card-horizontal.mdx" ### Horizontal card This is an example of a horizontal card. ``` ### Image cards ### Image card This is an example of a card with an image. ```mdx title="card-image.mdx" ### Image card This is an example of a card with an image. ``` ### Link cards with custom CTAs ### [Link card](/docs/components/columns) This is an example of a card with an icon and a link. Clicking on this card brings you to the Columns page. ```mdx title="card-cta.mdx" ### [Link card](/docs/components/columns) This is an example of a card with an icon and a link. Clicking on this card brings you to the Columns page. ``` ### 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](https://www.plandalf.com) External links show the arrow affordance without extra props. ### [Quiet internal card](/docs/components/columns) Internal links can suppress the arrow when the title is enough. ```mdx title="card-arrow-behavior.mdx" ### [External card](https://www.plandalf.com) External links show the arrow affordance without extra props. ### [Quiet internal card](/docs/components/columns) Internal links can suppress the arrow when the title is enough. ``` ### 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](/docs/platforms/stripe) 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. ```mdx title="card-icon-sources.mdx" ### [Image icon card](/docs/platforms/stripe) Local SVG icon paths render inside the card icon frame. ### Inline SVG icon card Inline SVG imports preserve the icon shape. ``` ### 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. ```mdx title="card-types.mdx" ### Note card Use `note` to highlight supporting information. ### Warning card Use `warning` to flag potential issues. ``` ## 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. ```mdx title="card-columns.mdx" ### First card This is the first card. ### Second card This is the second card. ``` ## Plandalf link cards ### [Start with Offers](/docs/offers/overview) Learn the product primitive before wiring checkout code. ### [Install the SDK](/docs/sdk/install) Add the browser SDK or framework package to your site. ```mdx title="cards-plandalf.mdx" ### [Start with Offers](/docs/offers/overview) Learn the product primitive before wiring checkout code. ### [Install the SDK](/docs/sdk/install) Add the browser SDK or framework package to your site. ``` ## 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](/docs/components/cards-tiles) Use for a polished next step with enough text to justify a card. ### [Compact card](/docs/components/code-groups) Use when the grid is dense and the body copy is short. ### Typed check card Use `type` for an important state that should still sit in a card grid. ```mdx title="card-variants.mdx" ### [Layer card](/docs/components/cards-tiles) Use for a polished next step with enough text to justify a card. ### [Compact card](/docs/components/code-groups) Use when the grid is dense and the body copy is short. ### Typed check card Use `type` for an important state that should still sit in a card grid. ``` ## 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. ### [API reference](/docs/api/reference) Pair the card with a preview only when the image helps the reader recognize the destination. ### Implementation note Horizontal cards are useful for compact notes, but do not use them as wrappers around other cards or tiles. ## Properties - `title` (string): The title displayed on the card. - `icon` (string): 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. - `iconType` (string): The Font Awesome icon style. Only used with Font Awesome-style imports. Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`. - `color` (string): Icon color as a CSS color value, such as `#0f766e`. - `href` (string): URL to navigate to when the card is clicked. - `horizontal` (boolean): Display the card in a compact horizontal layout. - `img` (string): URL or local path to an image displayed at the top of the card. - `cta` (string): Custom text for the action row. - `arrow` (boolean): Show or hide the link arrow icon. - `type` (string): Apply a callout-style theme to the card. One of `info`, `warning`, `note`, `tip`, `check`, or `danger`. ## Plandalf extensions - `imgMediaId` (string): Media library record ID for approved Plandalf screenshots and generated assets. - `alt | imgAlt` (string): 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 | columns` (1 | 2 | 3 | 4; default: 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. ## Related components - [Tiles](/docs/components/tiles): Use for denser icon grids. - [Navigation guide](/docs/components/cards-tiles): Compare cards and tiles. - [Icons](/docs/components/visual-context#icons): Pick shared icon names.