MICA / CARD + LIST COMPOSITION

A shell for the content.

One border around a collection, rather than a border around every entry. The same card can hold a list, ordinary prose, or a form.

Dark theme Mobile width Card border & surface Section dividers

01 / Notes in a card

The header and list content align. Rows supply their own spacing.

My notes

Private · Northbridge vs Riverside

@Jamie Reed kept finding space behind the right back. The early diagonal pass was on more often than we used it.
Today, 4:42 PM
The press improved after the break. The midfield stepped higher together instead of leaving the striker isolated.
Today, 4:35 PM · Edited
Watch the second-ball positioning on corners.
Today, 3:18 PM

02 / A collection with a footer

Navigation and supplementary information sit outside the rows.

Weekend predictions

12 members · Matchweek 4

Manage →

Jamie Reed3 exact scores
24 points
Alex Lane2 exact scores
19 points
Sam Morgan1 exact score
16 points

Updated after each final whistle

View standings →

03 / Padded prose

Readable content uses the padded body. Every section is optional.

Match observations

Northbridge 2 – 1 Riverside

Northbridge’s strongest spell came immediately after half-time, when the midfield moved closer to the front line.

Riverside still created chances from second balls. The result hides how evenly matched the sides were for long stretches.

These are sample observations to demonstrate the layout.

Last edited today

04 / A form with actions

The form owns submission; the card only supplies the structure.

Body only

A short explanation doesn’t need a header, footer, or extra section border. This is the smallest useful card.

Anatomy

<m-card>
  <m-card-header>…</m-card-header>
  <m-card-body flush divider>
    <ol data-list role="list">…</ol>
  </m-card-body>
  <m-card-footer divider>…</m-card-footer>
</m-card>

m-card-body supplies padding for prose and fields. m-card-body flush leaves spacing to its contents. Section dividers are explicit. Headers, footers, and the outer card are independent of the list; cards add no click target, keyboard behavior, or semantic role.

The card’s padding token also sets the list’s horizontal inset in this composition. That keeps headings and rows aligned without doubling the padding. List dividers stay inset and align with the row content. Try the card border and section-divider controls above to compare.

Standalone list example

Current Mica controls