Record — Related Card
Anatomy
Small context beside a record: a guest, room, account or asset with two to four facts and one action. Auto uses a compact inline row when effective facts are empty; cards with facts stack naturally on phones.
maud_ui::blocks::record::related_card
Props
Generated from public Rust fields. Defaults are evaluated from the implementation.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | Variant | Auto | No description |
state | crate::blocks::state::State | Ready | Explicit presentation state; Ready preserves the ordinary content. |
title | String | "" | No description |
title_markup | Option<Markup> | None | No description |
subtitle | Option<String> | None | No description |
facts | Vec<Fact> | [] | Usually 2–4 facts. Values are escaped by facts_list. |
facts_markup | Option<Markup> | None | Override facts with canonical, already-authorized field fragments. |
action | Option<Action> | None | No description |
action_markup | Option<Markup> | None | No description |
heading | Heading | H2 | No description |
Examples
light · fictional example
Maya Chen
Guest reference · No additional facts supplied
Guest
Maya Chen
- maya.chen@example.com
- Phone
- +1 514 555 0120
Maya Chen
Returning guest · 2nd stay
- maya.chen@example.com
- Language
- English · Contact by email
- Travelling with
- Alex Chen
Juniper 04
Garden room · Ready
- Room
- Queen bed · Ground floor
- Capacity
- 2 adults
- Checked
- Nora · Today at 07:40
dark · fictional example
Maya Chen
Guest reference · No additional facts supplied
Guest
Maya Chen
- maya.chen@example.com
- Phone
- +1 514 555 0120
Maya Chen
Returning guest · 2nd stay
- maya.chen@example.com
- Language
- English · Contact by email
- Travelling with
- Alex Chen
Juniper 04
Garden room · Ready
- Room
- Queen bed · Ground floor
- Capacity
- 2 adults
- Checked
- Nora · Today at 07:40
Loading, empty, error and disabled
Each example uses the block’s state prop. Empty and error are separate outcomes.
loading
Loading…
empty
No items yet.
Add an itemerror
Could not load this section.
Try againdisabled
Editing is unavailable in this example.
Maya Chen
Usage and composition
Import and example
use maud_ui::{blocks::{action::Action, record::related_card::{self, Props}}, primitives::facts_list::Fact};
related_card::render(Props {
title: "Juniper 04".into(), subtitle: Some("Garden room · Ready".into()),
facts: vec![Fact::new("Room", "Queen bed · Ground floor"), Fact::new("Capacity", "2 adults")],
action: Some(Action::link("View room", "/rooms/4")),
..Default::default()
});
Fact { label: String, value: String, mono: bool } has empty labels/values and false mono by default; Fact::new(label, value) escapes both. Fact::mono(label, value) opts into monospace. The markup overrides preserve caller-owned field and action contracts; an empty override suppresses the typed value. No data lookup or readiness inference occurs here.
Related
Facts list, record timeline, choice cards.
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.
Compact facts (0.11.0)
Variant::Compact keeps admitted facts and the sole action together in a denser card. Explicit Inline also retains supplied facts. Add Compact to exhaustive Variant matches. Render guest contact and room facts here once; omit duplicate overview rows in the consuming application.
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
The plain title uses the requested heading level. title_markup is wrapped in a div so a supplied heading is never nested in another heading; choose its level in the caller. Facts use a definition list. The sole action follows the facts in reading order, with a full-width target in Card and a content-width action in Inline; coarse pointers keep a height of at least 44px. Long values wrap in both themes. No JavaScript is required.