Use Card when a link needs more context than inline text. Cards can be plain and text-focused, or they can include a generated cover for a more visual entry point.
Basic usage
The title prop is required. Add an href when the card should link somewhere, and use the card body for the optional description.
The description supports Markdown, so you can include emphasis, inline code, and links.
Add an icon
Use icon for a small icon next to the title and description. This is useful for compact cards that should still have a clear visual anchor.
Add a cover
Use cover when the card should have a visual header. A cover is shown when either cover.icon or cover.text is set.
Add cover content
Add glass
Add glass: true to place the cover icon and text in a subtle glass-like surface.
Customize cover colors
cover.colors accepts one to four hex colors. If you provide fewer than four colors, the remaining colors are generated automatically.
Use colorSeed to change the generated palette when fewer than four colors are provided.
Change the cover pattern
Use patternSeed when the title-generated pattern does not have the composition you want. This changes the cover pattern without changing the card title or colors.
Add a button
Use button when the card should include a separate call to action. When button is set, the button uses button.href, and the title still uses href if one is provided.
Review every available API reference configuration option.
You can customize the button color for a single card with light and dark mode variation.
Adjust colors, logos, and other visual settings.
Adjust colors, logos, and other visual settings.
Site-wide defaults
Set card defaults in docs.json when you want the same cover palette or button color across the site. Card-level props take precedence over these defaults.
Cover colors are resolved in this order: cover.colors, theme.card.cover.colors, theme.themeColor, then the built-in palette. colorSeed only changes generated colors, so it has no effect when all four cover colors are set explicitly.
Button colors are resolved in this order: button.color, theme.card.button.color, navbar.primary.color, then the default neutral button style.
Props
| Prop | Type | Description |
|---|---|---|
title | string | Required. The card title. |
href | string | Optional link target. If no button is set, the whole card becomes a link. Uses the same internal, external, and OpenAPI endpoint link rules as MDX links. |
icon | string | Optional icon shown next to the title and description. |
cover | object | Optional visual cover configuration. The cover appears when cover.icon or cover.text is set. |
button | object | Optional call-to-action button configuration. |
| children | Markdown | Optional description content shown below the title. |
Cover props
| Prop | Type | Description |
|---|---|---|
icon | string | Icon shown in the center of the cover. |
text | string | Text shown in the center of the cover. |
glass | boolean | Adds a subtle glass surface around the cover icon and text. |
colors | string[] | One to four hex colors used for the cover. Missing colors are generated automatically. |
patternSeed | string | Changes the generated cover pattern without changing the title. |
colorSeed | string | Changes generated colors when fewer than four cover colors are provided. |
Button props
| Prop | Type | Description |
|---|---|---|
text | string | Required when button is set. The button label. |
href | string | Required when button is set. The button link target. Uses the same link rules as card href. |
color | string or{ light?: string; dark?: string } | Optional button color. Use a hex string for one color, or separate light and dark colors. |