Card

A surface with an optional header, cover, actions and footer, laid out as tables so every client keeps its fill and border. CardMeta puts an avatar beside a title and a description.

Basic

Pass a title for a header with a line under it, and extra to put a link at its end.

Cover

Pass a cover image to draw it above the body, as wide as the card and rounded at the top.

Size

Set size to small for tighter padding and a smaller title.

Borderless

Set variant to borderless to keep the surface and drop the border.

Inner

Set type to inner for a card inside a card, with a lightly filled header and a smaller title.

Inset with a header

Set type="inset" to tint the card and raise the body onto its own surface, with the title and extra on the tinted ground above it.

Inset with a cover

A cover on an inset card sits on the raised surface, with corners rounded to match it.

Meta

Use CardMeta in the body to put an avatar beside a title and a quieter description.

Cover and Meta

A cover image above a CardMeta, with two links in the actions row under them.

Actions

Pass actions for a row of equal cells under the body, divided by lines, here three icon links.
Pass footer for a row under the body with a line above it, padded like the header.