Base component
Card
Group related content in a responsive themed surface with title, description, content, and supporting slots.
31 props1 slots6 outputsTheme readyResponsive
Interactive playground
Configure Card
Change any prop and inspect the server-rendered component immediately.
Live preview
<Card
title="Card example"
subtitle="Card example"
description="A polished default card for a modern application."
actionLabel="Card"
actionHref="#card-demo"
headerActions='[
{
"id": "card-0-1",
"key": "card-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
},
{
"id": "card-0-2",
"key": "card-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
}
]'
navigation='[
{
"id": "card-0-1",
"key": "card-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
},
{
"id": "card-0-2",
"key": "card-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
}
]'
alertTitle="Card example"
alertDescription="A polished default card for a modern application."
emptyTitle="Card example"
items='[
{
"id": "card-0-1",
"key": "card-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
},
{
"id": "card-0-2",
"key": "card-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
}
]'
align="start"
dismissible="true"
ariaLabel="Card 1 example"
/>Event outputInteract with the preview to inspect the typed
payload.Live examples
Designed for real product surfaces
Compare configurations and resize the browser to check responsive behavior.
Recommended
01
Structured content card
Group a title, description, content, and supporting actions.
Live preview
<Card
title="Citizen service"
subtitle="Card example"
description="Access a trusted online service."
actionLabel="Card"
actionHref="#card-demo"
headerActions='[
{
"id": "card-0-1",
"key": "card-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
},
{
"id": "card-0-2",
"key": "card-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
}
]'
navigation='[
{
"id": "card-0-1",
"key": "card-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
},
{
"id": "card-0-2",
"key": "card-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
}
]'
alertTitle="Card example"
alertDescription="A polished default card for a modern application."
emptyTitle="Card example"
items='[
{
"id": "card-0-1",
"key": "card-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
},
{
"id": "card-0-2",
"key": "card-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
}
]'
align="start"
dismissible="true"
ariaLabel="Card 1 example">
<p class="showcase-card-copy">Supporting content belongs inside the default slot.</p>
</Card>Compact
02
Compact dashboard card
Use reduced spacing for metrics, filters, and operational information.
Live preview
<Card
title="Open requests"
subtitle="Compact Card"
description="Requests waiting for assignment."
actionLabel="Compact example"
actionHref="#card-demo"
headerActions='[
{
"id": "card-1-1",
"key": "card-1-1",
"value": "primary",
"label": "Secondary workflow",
"title": "Secondary workflow",
"description": "A compact configuration designed for dense application layouts.",
"text": "A configurable sample message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 24,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
},
{
"id": "card-1-2",
"key": "card-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
}
]'
navigation='[
{
"id": "card-1-1",
"key": "card-1-1",
"value": "primary",
"label": "Secondary workflow",
"title": "Secondary workflow",
"description": "A compact configuration designed for dense application layouts.",
"text": "A configurable sample message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 24,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
},
{
"id": "card-1-2",
"key": "card-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
}
]'
alertTitle="Compact Card"
alertDescription="A compact configuration for dashboards and dense product surfaces."
emptyTitle="Compact Card"
items='[
{
"id": "card-1-1",
"key": "card-1-1",
"value": "primary",
"label": "Secondary workflow",
"title": "Secondary workflow",
"description": "A compact configuration designed for dense application layouts.",
"text": "A configurable sample message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 24,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
},
{
"id": "card-1-2",
"key": "card-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
}
]'
size="compact"
variant="soft"
align="center"
dismissible="true"
ariaLabel="Card 2 example">
<strong class="showcase-card-value">38</strong>
</Card>Advanced
03
Raised interactive card
Use a stronger visual treatment for featured content.
Live preview
<Card
title="Featured guide"
subtitle="Advanced Card"
description="A complete guide to public safety and emergency readiness."
actionLabel="Advanced example"
actionHref="#card-demo"
headerActions='[
{
"id": "card-2-1",
"key": "card-2-1",
"value": "primary",
"label": "Advanced workflow",
"title": "Advanced workflow",
"description": "A richer configuration with more supporting information and actions.",
"text": "A configurable sample message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 32,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Unlimited"
]
},
{
"id": "card-2-2",
"key": "card-2-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A richer configuration with more supporting information and actions.",
"text": "Another configurable message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Unlimited"
]
}
]'
navigation='[
{
"id": "card-2-1",
"key": "card-2-1",
"value": "primary",
"label": "Advanced workflow",
"title": "Advanced workflow",
"description": "A richer configuration with more supporting information and actions.",
"text": "A configurable sample message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 32,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Unlimited"
]
},
{
"id": "card-2-2",
"key": "card-2-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A richer configuration with more supporting information and actions.",
"text": "Another configurable message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Unlimited"
]
}
]'
alertTitle="Advanced Card"
alertDescription="A richer configuration demonstrating additional content and hierarchy."
emptyTitle="Advanced Card"
items='[
{
"id": "card-2-1",
"key": "card-2-1",
"value": "primary",
"label": "Advanced workflow",
"title": "Advanced workflow",
"description": "A richer configuration with more supporting information and actions.",
"text": "A configurable sample message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 32,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Unlimited"
]
},
{
"id": "card-2-2",
"key": "card-2-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A richer configuration with more supporting information and actions.",
"text": "Another configurable message.",
"href": "#card-demo",
"actionHref": "#card-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Unlimited"
]
}
]'
size="spacious"
variant="raised"
align="end"
dismissible="true"
ariaLabel="Card 3 example">
<a href="#guide" class="showcase-action">Read guide</a>
</Card>Component outputs
Receive every typed component output
Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.
@clickFires when the interactive surface is activated.@actionFires when the component's primary or item action is activated.@navigateFires when the component emits the navigate event.@dismissFires after the announcement or feedback surface is dismissed.@loadFires after remote or deferred content loads successfully.@errorFires when the component cannot complete an operation.<Card
@click='console.log(payload)'
@action='console.log(payload)'
@navigate='console.log(payload)'
@dismiss='console.log(payload)'
@load='console.log(payload)'
@error='console.log(payload)'
/>import { registerOutputHandler } from "@wrnexus/csr/outputs"
const component = document.querySelector("[data-ui-component=\"Card\"], [data-component=\"Card\"]")
if (component) registerOutputHandler(component, "click", (payload) => {
console.log("click", payload)
})
if (component) registerOutputHandler(component, "action", (payload) => {
console.log("action", payload)
})
if (component) registerOutputHandler(component, "navigate", (payload) => {
console.log("navigate", payload)
})
if (component) registerOutputHandler(component, "dismiss", (payload) => {
console.log("dismiss", payload)
})
if (component) registerOutputHandler(component, "load", (payload) => {
console.log("load", payload)
})
if (component) registerOutputHandler(component, "error", (payload) => {
console.log("error", payload)
})Component API
Props and configuration
All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
title | string | "Card title" | No |
subtitle | string | "" | No |
description | string | "" | No |
header | string | "" | No |
footer | string | "" | No |
imageSrc | string | "" | No |
imageAlt | string | "" | No |
imagePosition | string | "top" | No |
actionLabel | string | "" | No |
actionHref | string | "" | No |
headerActions | unknown[] | [] | No |
navigation | unknown[] | [] | No |
activeNav | string | "" | No |
mobileNavigation | boolean | false | No |
alertTitle | string | "" | No |
alertDescription | string | "" | No |
empty | boolean | false | No |
emptyTitle | string | "No data to show" | No |
emptyIcon | string | "icon-[lucide--inbox]" | No |
items | unknown[] | [] | No |
size | string | "md" | No |
color | string | "primary" | No |
variant | string | "default" | No |
layout | string | "vertical" | No |
align | string | "left" | No |
hover | string | "none" | No |
scrollable | boolean | false | No |
maxHeight | string | "18rem" | No |
dismissible | boolean | false | No |
ariaLabel | string | "" | No |
class | string | "" | No |