Cards
Elevated Cards
Basic Card
This is a basic elevated card with just a title and content.
With Subtitle
Secondary information
This card includes a subtitle to provide additional context.
With Menu
This card has a menu button in the top-right corner.
With Footer
This card includes a footer section for actions or additional information.
This card has no title or header, just content.
Complete Example
With all features
This is a comprehensive example with title, subtitle, menu, and footer.
Multiple paragraphs can be included in the content area.
Filled Cards
Primary Card
This is a filled card using the primary color theme.
Secondary Card
This is a filled card using the secondary color theme.
Tertiary Card
This is a filled card using the tertiary color theme.
With Subtitle
Secondary information
This card includes a subtitle to provide additional context.
With Menu
This card has a menu button in the top-right corner.
With Footer
This card includes a footer section for actions or additional information.
Outlined Cards
Outlined Card
This is a basic outlined card with a light border.
With Subtitle
Secondary information
This card includes a subtitle to provide additional context.
With Menu
This card has a menu button in the top-right corner.
With Footer
This card includes a footer section for actions or additional information.
This card has no title or header, just content.
Complete Example
With all features
This is a comprehensive example with title, subtitle, menu, and footer.
Multiple paragraphs can be included in the content area.
Custom Usage
Media Card
This card demonstrates how to include an image in a card layout.
Interactive Card
Cards can contain interactive elements like forms:
Card Attributes
Cards support various attributes and named slots to customize their appearance and content. Here's a reference for all available attributes and slots:
|
Attribute
|
Type
|
Default
|
Description
|
|---|---|---|---|
color
|
string | "primary" | Card color theme. Options: "primary", "secondary", "tertiary" (affects filled variant) |
title
|
string | none | The card's title, displayed at the top |
subtitle
|
string | none | Secondary text displayed below the title |
slot_class
|
string | "p-4 flex-grow" | CSS classes to apply to the card's content area |
footer_class
|
string | "" | Additional CSS classes to apply to the card's footer |
class
|
string | "" | Additional CSS classes to apply to the card container |
Named Slots
|
Slot
|
Description
|
|---|---|
default (unnamed)
|
The main content of the card |
menu
|
Content to display in the top-right corner of the card, typically an icon button |
footer
|
Content to display in the card's footer area, typically action buttons |
Usage Example
<c-card.elevated
title="Card Title"
subtitle="Optional subtitle"
slot_class="p-4 flex-grow"
footer_class="flex justify-end"
class="w-full max-w-md">
<c-slot name="menu">
<c-button.icon aria-label="Menu">more_vert</c-button.icon>
</c-slot>
<p>This is the main content of the card.</p>
<c-slot name="footer">
<c-button.text>Cancel</c-button.text>
<c-button.filled class="ml-2">Save</c-button.filled>
</c-slot>
</c-card.elevated>