ComponentsData display

Paper

MudPaper is the plain surface that cards, menus and dialogs are made of. Use it directly when you need a panel with a background, a border or a shadow and no further structure.

Elevation 0 to 24

Elevation sets the shadow depth. Low values separate a panel quietly; high values belong to things that float, such as dialogs.

0 Elevation

1 Elevation

2 Elevation

3 Elevation

4 Elevation

5 Elevation

6 Elevation

7 Elevation

8 Elevation

9 Elevation

10 Elevation

11 Elevation

12 Elevation

13 Elevation

14 Elevation

15 Elevation

16 Elevation

17 Elevation

18 Elevation

19 Elevation

20 Elevation

21 Elevation

22 Elevation

23 Elevation

24 Elevation

Outlined and square

Outlined replaces the shadow with a border. Square removes the rounded corners, for surfaces that touch the edge of a page or another surface.

Shadow, rounded Outlined=false · Square=false

Shadow, square Outlined=false · Square=true

Outlined, rounded Outlined=true · Square=false

Outlined, square Outlined=true · Square=true

Sizes

Width, Height and their Min and Max variants accept any CSS length, so a paper can be fixed, fluid or bounded.

Width="12rem" Height="4rem"

Width="60%" MinHeight="4rem": grows with its content

MaxWidth="28rem": fluid until it reaches the bound, then stops

MaxHeight="7rem" with overflow-y: auto scrolls the rest.

06:10 · Flour delivery checked in, 40 sacks.

06:45 · Oven 2 serviced; temperature probe replaced.

07:20 · Café order for the station kiosk packed.

08:05 · Rye starter refreshed for tomorrow.

09:30 · School order confirmed for Thursday.

Papers as layout surfaces

A small dashboard built from papers: a header strip, a side panel and content tiles. Outlined papers keep the hierarchy visible without heavy shadows.

Crystallography lab

Week 19

Benches

Bench A · growth

Bench B · microscopy

Bench C · diffraction

Cold room

Samples growing

4 started today

Crystals mounted

2 waiting for review

Cold room

4 °C

Stable for 72 hours

Next step

Mount the three largest crystals from sample 14 for diffraction on Thursday morning.

Playground

Change any parameter; the markup below updates with only the values that differ from the defaults.

Specimen tray 3

Elevation: 4

Width

Height

Outlined

Square

<MudPaper Elevation="4" Width="16rem" Height="8rem">Specimen tray 3</MudPaper>