Task — Grid
Anatomy
Compact launcher for common tasks: three equal columns on larger screens, one below 40rem. Each card carries a title, one-line description and one action.
maud_ui::blocks::task::grid
Props
Generated from public Rust fields. Defaults are evaluated from the implementation.
| Prop | Type | Default | Description |
|---|---|---|---|
state | crate::blocks::state::State | Ready | Explicit presentation state; Ready preserves the ordinary content. |
tasks | Vec<Task> | [] | No description |
aria_label | String | "Available tasks" | No description |
heading | Heading | H3 | No description |
Examples
Review applications
Check the supplied identity documents before completing onboarding.
Check in a guest
Confirm the reservation and assign a room.
Create a reservation
Find availability for a new stay.
Review today's arrivals
Resolve missing details before guests arrive.
Loading, empty, error and disabled
Each example uses the block’s state prop. Empty and error are separate outcomes.
Usage and composition
Import and example
use maud_ui::blocks::{action::Action, task::grid::{self, Props, Task}};
grid::render(Props {
tasks: vec![Task {
title: "Check in a guest".into(),
description: "Confirm a reservation and assign a room.".into(),
action: Action::link("Start check-in", "/check-in"),
}],
..Default::default()
});
Presentation states (0.10.1)
Props::state: maud_ui::blocks::state::State defaults to Ready. Loading { message } shows skeletons; Empty { message, action } and Error { message, retry } provide distinct recovery paths; Disabled { reason } retains admitted content in an inert subtree with an external reason. Loading, empty and error omit ready content. Inert disables interaction, not server authorization or submission of values by an enclosing form. Each live API page shows all four states together. Add state: Default::default() to exhaustive Props literals.
Count and copy (0.11.0)
No tasks emits no wrapper. One task is a compact row spanning the available width; multiple tasks use columns that fit their count and available space. Descriptions retain their complete text in the DOM and title attribute; CSS ellipsis handles visual truncation.
State::Absent (0.11.0) means no input/rule was declared and emits nothing. Keep any caller-owned section heading inside the same conditional. Use Error only for a declared operation that failed; never show an unconfigured-rule message to the user.
Accessibility
Use action labels that make sense on their own, such as Start check-in. Actions support the shared link/POST contract. Titles wrap; descriptions visually ellipsize but remain complete in the DOM and title attribute. Footers align after varying title lengths. An empty task vector renders an empty list; compose empty_state when you need recovery guidance. No JavaScript is required.