ActionCard
Card with a click target and trailing chevron — renders as link, button or static div
SSR mode
Examples
Link card (Href)
Button card (OnClick)
Static card (no interaction)
Read-only entry
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| ActionCard | A horizontally-laid card with an optional leading icon, a title, an optional description, and a trailing chevron. Automatically renders as <a> when Href is set, <button> when OnClick is wired, or <div> otherwise. The group class enables the chevron's group-hover:translate-x-0.5 animation. Wrapper-styling. |
ActionCard
A horizontally-laid card with an optional leading icon, a title, an optional description, and a trailing chevron. Automatically renders as <a> when Href is set, <button> when OnClick is wired, or <div> otherwise. The group class enables the chevron's group-hover:translate-x-0.5 animation. Wrapper-styling.
| Property | Type | Required | Description |
|---|---|---|---|
| Title | string | Card heading. Rendered as <h3> in text-base font-semibold. Default: empty string. | |
| Description | string? | Supporting text in text-sm text-muted-foreground. Omit to suppress. | |
| Href | string? | When set, renders the card as <a href>. Takes precedence over OnClick. | |
| IconSvg | string? | SVG path string for the leading icon. Rendered at size-6 text-primary. Omit to suppress. | |
| OnClick | EventCallback | Click callback. Used when Href is not set to render the card as <button>. | |
| Borders | bool | Toggles border border-border rounded-lg. Default: true. | |
| BgFilled | bool | Toggles bg-background. Default: true. | |
| Gutters | bool | Toggles p-6 gap-4 on the card wrapper. Default: true. |