ComponentsData display
Card
MudCard groups content and actions about a single subject: a product, an article, a person. Compose it from a header, media, content and actions, and keep each card about one thing.
Content and actions
The smallest useful card: MudCardContent for the text and MudCardActions for what the reader can do next.
Service notice
Riverside line closed on Sunday
Track renewal between Old Market and University. Replacement buses run every ten minutes from 06:00 to 23:30.
Outlined, elevated and square
Outlined draws a border and suits this calm theme; Elevation lifts the card with a shadow. Square removes the rounded corners.
Outlined
Room 3 is booked for the bread-scoring workshop at 14:00.
Elevation 1 (default)
Room 3 is booked for the bread-scoring workshop at 14:00.
Elevation 6
Room 3 is booked for the bread-scoring workshop at 14:00.
Outlined and square
Room 3 is booked for the bread-scoring workshop at 14:00.
Header with avatar and actions
MudCardHeader has slots for an avatar, the title content and header actions. Icon-only actions need an accessible name.
Priya Raman
Lab notebook · 12 minutes agoSample 14 crystallized overnight at 4 °C. Repeating with half the salt concentration to see whether the needles grow longer.
Media
MudCardMedia shows an image as a background at a fixed Height, cropping it to fit. Title gives the image a tooltip; describe it in the content too.
Cape Rosa lighthouse
Guided climbs on weekends, 11:00 and 15:00. 112 steps to the lantern room.
Media below the text
Order is up to you; the same image at Height 120 crops to its middle band.
Loading skeleton
While data loads, skeletons keep the card's shape so the layout does not jump. Reloading cancels any load still in progress.
Loading the next session…
A product card
A bakery product with media, price, rating, dietary chips and a quantity stepper that updates the action label.
Cardamom knot
€ 2.40
Brioche dough twisted with butter, sugar and freshly ground cardamom. Baked at 6:30.
2
Article cards
Cards in a responsive grid that share the same structure, so heights and actions line up across a row.
Transit
Night buses return to the hill villages
Four routes resume on Friday with a new timetable built around the last trains.
Science
Why our lab cools samples slowly
A degree per minute gave us larger crystals than an ice bath ever did.
Food
The bakery that never sells out
Pre-orders, a chalkboard and one honest rule about yesterday's bread.
Playground
Change any parameter; the markup below updates with only the values that differ from the defaults.
Workshop: bread scoring
Saturday 14:00, room 3. Bring an apron; blades and dough are provided.
<MudCard Elevation="0" Outlined="true">
<MudCardHeader>
<CardHeaderContent>…</CardHeaderContent>
</MudCardHeader>
<MudCardContent>…</MudCardContent>
<MudCardActions>…</MudCardActions>
</MudCard>