# Card
Source: https://lumeo.nativ.sh/components/card
# Card
Displays a card with header, content, and footer.
## Installation
.NET CLI PackageReference Lumeo CLI
dotnet add package Lumeo
One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).
## Usage
@using Lumeo
## When to Use
- Group related content such as text, images, and actions into a single container
- Display product or feature cards in a grid layout
- Build dashboard widgets with headers, stats, and action buttons
- Present form sections with a clear visual boundary
- Show preview cards for blog posts, articles, or media
Preview Code
Default
### Notifications
You have 3 unread messages.
Your recent notifications will appear here. Stay up to date with the latest updates.
Mark all as read
Preview Code
Card with Actions
### Blog Post
Published on Jan 12, 2025
Learn how to build accessible, composable UI components using Blazor and Tailwind CSS in this in-depth guide.
Edit Delete
Preview Code
Horizontal Card
### Featured Article
5 min read
An introduction to modern component-driven design systems.
Read more
Preview Code
With Form
### Create project
Deploy your new project in one click.
Name
Description
Cancel Deploy
Preview Code
Flat variant
A borderless, background-free surface. Paired with `OnClick` it is the natural primitive for clickable list rows — replacing the old `Ghost button + p-0` workaround.
Profile
Billing
Notifications
## Keyboard Interactions
Key
Action
Tab
Move focus to the next interactive element inside the card (or, for an interactive card, to the card itself)
Enter / Space
Activate the card when `OnClick` is set (the card renders with `role="button"` and `tabindex="0"`)
By default a Card is a plain container with no built-in keyboard interactions — focus management depends on the interactive elements placed inside. When `OnClick` is set, the Card itself becomes focusable (button role) and responds to Enter/Space.
## API Reference
### Card
Property
Type
Default
Description
Variant
Card.CardVariant
Default
Surface style. `Default` = bordered card with background; `Flat` = borderless, background-free content surface (pair with `OnClick` for clickable list rows).
OnClick
EventCallback
—
Invoked when the card is clicked (makes the card interactive).
PressEffect
Button.ButtonPressEffect
None
Press feedback when OnClick is set. Values: None, Scale, Brightness, Ripple.
### CardHeader
Property
Type
Default
Description
Container for the card title and description. Renders as a flex column with spacing.
### CardContent
Property
Type
Default
Description
Main content area of the card with horizontal padding.
### CardFooter
Property
Type
Default
Description
Footer area of the card rendered as a flex row, useful for action buttons.
## Related Components
- [Accordion](/components/accordion) — Use when content sections need to be collapsible rather than always visible
- [Dialog](/components/dialog) — Use when card-like content needs to appear as a modal overlay
- [Collapsible](/components/collapsible) — Use when a card section should expand or collapse on demand