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.
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<MouseEventArgs> | — | 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 — 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