Card
Displays a card with header, content, and footer.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Card />
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
Notifications
You have 3 unread messages.
Your recent notifications will appear here. Stay up to date with the latest updates.
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.
Featured Article
5 min read
An introduction to modern component-driven design systems.
Create project
Deploy your new project in one click.
Outline
Bordered with a transparent fill, so the page background shows through.
Use when a card is layered on top of a coloured or already-card surface.
Elevated
Card background plus a resting shadow for a raised, floating feel.
Matches shadcn's default Card depth.
Clickable card
Press me — the whole surface scales on click.
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
Density falls back to an ancestor DensityScope, then Comfortable —
see the Density guide.
CardHeader
Container for the card title and description. Renders as a flex column with spacing.
CardContent
Main content area of the card with horizontal padding.
CardFooter
Footer area of the card rendered as a flex row, useful for action buttons.
Related Components
- Accordion — Use when content sections need to be collapsible rather than always visible
- Dialog — Use when card-like content needs to appear as a modal overlay
- Collapsible — Use when a card section should expand or collapse on demand