Card
Cards contain content and actions about a single subject. They provide a flexible and extensible content container with multiple variants and slots.This is the default card appearance with a subtle shadow to lift it off the page.
This card uses a border instead of a shadow for a flatter, cleaner look.
This card has no border or shadow, useful for grouping content in an existing container.
This card uses the standard padding across its header, body, and actions.
This card reduces the padding, making it ideal for dense data displays or smaller sidebars.
Your account is currently active. Please review your security settings to ensure maximum protection.
This card can be dismissed by clicking the X icon in the header.
We provide an extra header slot for badges, toggles, or secondary action menus.
Beautiful Scenery
By combining hideOverflow and bodyFluid, you can create edge-to-edge media cards.
Square corners.
Default rounded corners.
Highly rounded corners.
headerFluid is true, the image touches the top edges. - Alice Johnson
- Bob Smith
- Charlie Davis
Your subscription is about to expire in 3 days. Please update your billing information to avoid service interruption.
API Reference
Property | Type | Default | Description |
|---|---|---|---|
appearance | 'outline' | 'borderless' | 'elevated' | 'elevated' | Defines the structural shadow and border style of the card. |
spacing | 'normal' | 'compact' | 'normal' | Controls the inner padding scale of the card. |
radius | ScaleAttributeType | 'lg' | Sets the border radius of the card. |
size | 'sm' | 'md' | 'lg' | 'md' | Controls the typographic scale inside the card. |
label | string | undefined | Sets a simple string title for the header section. |
closable | boolean | false | Displays a dismiss icon in the header. Emits (onClose) when clicked. |
hide-overflow | boolean | false | Applies overflow hidden. Great for embedding edge-to-edge images. |
full-width | boolean | false | Forces the host element to width 100% using flex display. |
fluid / ...-fluid | boolean | false | Removes padding from the entire card (fluid) or specific sections (header-fluid, body-fluid, etc.). |
...-class / ...-style | string | object | null | Custom class or style injection for sections like container, header, body, extra-header, action. |
(onClose) | EventEmitter<void> | - | Emitted when the close icon is clicked (requires closable=true). |
[header-slot] | Content Slot | - | Replaces the default label with custom HTML content. |
[caption-slot] | Content Slot | - | Injects small descriptive text below the title. |
[extra-header-slot] | Content Slot | - | Injects elements to the far right of the header (like badges or menus). |
[action-slot] | Content Slot | - | Injects footer action elements (like buttons) into a flex container. |