Item

Anatomy

Media + content + actions list row for notifications, search results, file listings, and other row-based layouts.

maud_ui::primitives::item

Props

Generated from public Rust fields. Defaults are evaluated from the implementation.

Prop	Type	Default	Description
`id`	`Option<String>`	`None`	Optional DOM id (wire triggers / skip-links to this row).
`variant`	`Variant`	`Default`	Visual variant — frame style.
`size`	`Size`	`Default`	Density.
`tone`	`Option<Tone>`	`None`	Optional health tone — tints the row background to match the `status_dot` in its media slot.
`children`	`Markup`	`PreEscaped("")`	Row contents — typically composed from `media`, `content`, `actions`.

Examples

Item group — three variants

Default with icon media, Outline with image media, Muted title-only (sm).

📬

New message from Jane

Hey — just a heads up that the design doc is ready for review.

Acme Corp launch brief

Shared folder · 12 files · updated 2h ago

Drafts (3)

Status tones — service health rows

status_dot in the media slot, Props.tone tinting the row. Each dot ships a visually-hidden label.

auth-service

web-gateway

19d

event-relay

—

log-scribe

—

With header / footer / separator

🔔

Build finished

api-service · blue slot · 00:42 elapsed

✓

Tests passed

Usage and composition

Import

use maud_ui::primitives::item::{self, Props, Variant, Size, MediaVariant};

Example

use maud::html;
use maud_ui::primitives::item;

html! {
    (item::group(html! {
        (item::render(item::Props {
            variant: item::Variant::Default,
            size: item::Size::Default,
            children: html! {
                (item::media(item::MediaVariant::Icon, html! { "📧" }))
                (item::content(html! {
                    (item::title(html! { "New message" }))
                    (item::description(html! { "From Jane Doe" }))
                }))
                (item::actions(html! {
                    button { "Reply" }
                }))
            },
            ..Default::default()
        }))
    }))
}

Variant

pub enum Variant {
    Default,
    Outline,
    Muted,
}

Size

pub enum Size {
    Default,
    Sm,
    Xs,
}

MediaVariant

pub enum MediaVariant {
    Default,
    Icon,
    Image,
}

Helpers

group(children) — Wrap items with consistent spacing and role="list".
media(variant, children) — Icon/avatar/image slot. Sizing hints via MediaVariant.
content(children) — Primary textual stack (usually title + description).
title(children) — Item heading (h3).
description(children) — Muted supporting text (p).
actions(children) — Trailing action slot (buttons, timestamps, badges).
header(children) — Optional banner above main row (e.g., timestamp, category).
footer(children) — Optional strip below main row (e.g., source, author).
separator() — Visual <hr> divider between grouped items.

Hover Card — richer overlay for item details.
Button — actions typically contain buttons.

Shadcn Reference

Mirrors shadcn's Item primitive with Variant/Size/MediaVariant enums and helper-based composition for media, content, title, description, actions, header, footer, separator.

Accessibility

Item group has role="list".
Each item implicitly treated as role="listitem".
Content hierarchy maintained via semantic h3/p elements.
Media slot size hints guide icon vs. image sizing for WCAG contrast.

← Back to Gallery