Card
Notifications
Notifications
Choose what you want to be notified about.
Push Notifications
Send notifications to device.
Email Notifications
Receive emails for activity updates.
Stat card
Total Revenue
$45,231.89
+20.1% from last month
Create project
Create project
Deploy your new project in one click.
Compact card (size: Sm)
Storage
6.2 GB of 15 GB used.
Card with action slot
Team members
Manage who has access to this project.
- Alice Johnson — Owner
- Bob Smith — Editor
- Carol Davis — Viewer
Usage
use maud_ui::primitives::card;
use maud::html;
let html = card::render(card::Props {
title: Some("Project stats".into()),
description: Some("Overview of your project.".into()),
children: html! { p { "Content goes here." } },
footer: Some(html! {
button.mui-btn.mui-btn--primary.mui-btn--sm { "View details" }
}),
});Card
A container primitive with optional header (title, description, top-right action), body, and footer sections. Flexible layout for displaying grouped content.
Import
use maud_ui::primitives::card::{self, Size, Props};
Example
use maud::html;
use maud_ui::primitives::card;
html! {
(card::render(card::Props {
title: Some("Settings".into()),
description: Some("Manage your preferences.".into()),
children: html! { p { "Your content here" } },
footer: None,
size: card::Size::Default,
action: None,
}))
}
Props
| Field | Type | Default | Description |
|---|---|---|---|
title | Option<String> | None | Optional card title displayed in header |
description | Option<String> | None | Optional subtitle displayed below title in header |
children | Markup | html! {} | Main content markup (card body) |
footer | Option<Markup> | None | Optional footer markup (bottom section) |
size | Size | Default | Card padding size variant |
action | Option<Markup> | None | Optional top-right header slot (e.g., button for secondary action) |
Variants / Enums
Size
Default: standard padding (1.5rem)Sm: compact padding (0.75rem)
Helper Functions
| Function | Signature | Purpose |
|---|---|---|
action | fn(Markup) -> Markup | Renders the top-right header action slot |
content | fn(Markup) -> Markup | Renders the card body wrapper |
footer | fn(Markup) -> Markup | Renders the card footer wrapper |
Accessibility
Semantic structure with implicit landmarks (header, main body, footer). Use ARIA labels in the action slot if it contains interactive elements without visible labels.
Related
Button (for footer CTAs), Switch (for settings cards), Dialog (for modal card variants)
Shadcn reference
https://ui.shadcn.com/docs/components/base/card