Skip to content

Document typed cards #5548

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ehcaw merged 2 commits into from
Apr 27, 2026
+35 −0
Merged

Document typed cards #5548

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca08e5e
Document typed cards
mintlify[bot] Apr 27, 2026
6f75d41
Apply suggestion from @ethanpalm
ethanpalm Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions components/cards.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,37 @@ You can customize the call-to-action text and control whether an arrow appears.
</Card>
```

### Typed cards

Add a `type` property to style a card with the same theme as a [callout](/components/callouts). Typed cards apply a colored background, border, and default icon that match the selected type, so you can use them to draw attention to grouped content like notes, warnings, or success states.

Supported types: `info`, `warning`, `note`, `tip`, `check`, and `danger`. Optionally, override the default icon with the `icon` property.

<Columns cols={2}>
<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>
<Card title="Tip card" type="tip">
Use `tip` to share helpful suggestions.
</Card>
<Card title="Danger card" type="danger">
Use `danger` for destructive or risky actions.
</Card>
</Columns>

```mdx Typed card example
<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 the [Columns component](/components/columns) to organize multiple cards side by side. The Columns component supports one to four columns and automatically adjusts for smaller screens.
Expand Down Expand Up @@ -129,3 +160,7 @@ Use the [Columns component](/components/columns) to organize multiple cards side
<ResponseField name="arrow" type="boolean">
Show or hide the link arrow icon.
</ResponseField>

<ResponseField name="type" type="string">
Apply a callout-style theme to the card. One of `info`, `warning`, `note`, `tip`, `check`, or `danger`. Sets the card's background, border, and default icon to match the selected type.
</ResponseField>
Loading