# Cards

## The card parts

`Card` is a `Surface` with no padding of its own. The padding belongs to the
parts, which is what lets `CardMedia` reach the edge of the same card. Every
part is optional and the order is yours: the card stacks what it is handed, and
wherever two padded parts meet, in either order, it drops the doubled gap. Set
`padding="none"` on a part and it owns its gaps from then on.

Write a title or a label on the same line as its tag, or wrap it in a `<span>`.
MDX reads children that start on a new line as flow content and wraps the text
in a paragraph; children on the opening line stay phrasing.

Nothing here knows what a product, a demo or a status is. The title, the
metadata and the actions are children, so a card never decides where it links.

The card itself is never an anchor. A whole-card link is `href` on `CardHeader`:
the title carries the link and the recipe stretches it over the card, which
leaves the actions and the metadata clickable in their own right.

### A card with every part

- [Deploy a model to hardware](https://ambiqai.github.io/helia-ui/cards/#the-card-parts)
A path from a trained model to an application running on the device, with
the checks that matter at each step.

[Read the guide](https://ambiqai.github.io/helia-ui/cards/#the-card-parts)
Reference

### Without media

A header and a body, and a whole-card link instead of an action. `interactive`
adds the shared hover background, and the card takes the focus ring when the
stretched header link is focused.

- [Choose a deployment path](https://ambiqai.github.io/helia-ui/cards/#without-media)
When to compile ahead of time and when to stay on the runtime.

Check first

Supported hardware

A muted card recedes when it sits inside another surface.

### Actions only

`CardActions` is a flex row around whatever you pass it. `align` is `start`,
`end`, or `between`.

[Start](https://ambiqai.github.io/helia-ui/cards/#actions-only)
[Browse](https://ambiqai.github.io/helia-ui/cards/#actions-only)

Docs
Source

### Media ratios

`CardMedia` owns the frame; the media it receives fills it. `fit="contain"`
keeps a logo or a diagram whole instead of cropping it.

1/1

4/3

16/9

## Badge

Six tones and an optional leading dot. The tones are semantic, not a status
vocabulary: map your own statuses onto them in the composition that knows what
they mean.

The label is required: the dot is decorative and hidden from assistive
technology, so a badge with no label renders nothing.

Neutral
Info
Success
Warning
Danger
Accent

Neutral

Success

Danger

Medium

Medium with dot

The artwork in these examples comes from `Media`, which has a page of its
own under [Media](https://ambiqai.github.io/helia-ui/media/).