Card
Basic usage#
<Card title="API reference" icon="code" href="/components/overview">
Learn how to model response schemas.
</Card>Card group#
<CardGroup cols={2}>
<Card title="Installation" icon="rocket" href="/getting-started/installation">
Create a standalone Shiso site.
</Card>
<Card title="Components" icon="book-open" href="/components/overview">
Browse all docs components.
</Card>
</CardGroup>Horizontal card#
<Card title="Changelog" icon="history" href="/" horizontal cta="Read more" />Image card#
<Card title="Image card" img="/images/sample.jpg">
Add an image above the card content with `img`.
</Card>Link card#
<Card title="Shiso website" icon="rocket" color="#16a34a" href="https://shiso.umami.is" cta="Visit site">
External links show an arrow by default. Set `arrow={false}` to hide it.
</Card>Typed cards#
Typed cards use the matching callout theme and default icon. Set icon to override the default.
<Card title="Note card" type="note">Supporting information.</Card>
<Card title="Warning card" type="warning">Something needs attention.</Card>Cards with href render as links; without it they are static containers. External href values open in a new tab. For mixed content side by side, use Columns.
Properties#
Card#
| Name | Type | Description |
|---|---|---|
title |
ReactNode |
Card heading. |
href |
string |
Optional link destination. When set, the card is interactive. |
icon |
ReactNode | string |
Lucide icon name, image URL or path, or rendered element. |
color |
string |
CSS color applied to the icon. |
img |
string |
Image shown above the body. |
cta |
string |
Trailing action label. |
horizontal |
boolean |
Lay out icon, title, and body in a row. Default: false |
arrow |
boolean |
Show or hide the trailing arrow. External links show it by default. |
type |
'note' | 'info' | 'warning' | 'tip' | 'check' | 'danger' |
Apply the matching callout background, border, text color, and default icon. |
children |
ReactNode |
Body content. |
CardGroup#
| Name | Type | Description |
|---|---|---|
cols |
1 | 2 | 3 | 4 |
Number of columns in the grid. Default: 2 |
children |
ReactNode |
One or more Card children. |
Back to Components overview.