Card

Live demo

Weekly volume

+8%

Surface card

A raised group inside it

How to use it

The container: surface by default, raised for groups inside a surface, hero for the one hero per screen, frame for phone-level shells.

Provide children, variant and padding (none, sm 12, md 16, lg 20).
hero flips text to --e-on-hero and gives each theme its signature: Graphite's dark slab, Paper's ruled block, Mineral's forest panel, Enamel's yellow plate, Ember's glow.
Group content with tone (raised inside surface) instead of drawing borders around everything.

Do: one hero per screen. Don't: cards inside cards inside cards, colored left-border accent cards, shadows the theme does not define.

In every theme

Follows the mode picked in the header.

Graphite

Weekly volume

Raised inside surface

Glass

Weekly volume

Raised inside surface

Paper

Weekly volume

Raised inside surface

Mineral

Weekly volume

Raised inside surface

Enamel

Weekly volume

Raised inside surface

Ember

Weekly volume

Raised inside surface

Code

React

import { Card, Stat } from 'enma/react';

<Card variant="hero" padding="lg">
  <Stat size="hero" label="Weekly volume" value={12480} unit="kg" delta="+8%" />
</Card>
<Card padding="md">
  <Card variant="raised" padding="sm">Grouped content</Card>
</Card>

Plain HTML

<div class="e-card e-sq e-card--hero e-card--pad-lg">...</div>
<div class="e-card e-sq e-card--pad-md">
  <div class="e-card e-sq e-card--raised e-card--pad-sm">Grouped content</div>
</div>

Props

`CardProps`

Also accepts every attribute of React.HTMLAttributes<HTMLElement>.

Props of CardProps
Prop	Type	Default	Description
`variant`	'surface' \| 'raised' \| 'hero' \| 'frame'	'surface'	surface: default container. raised: grouped inner panel. hero: the one hero per screen. frame: phone-level container.
`padding`	'none' \| 'sm' \| 'md' \| 'lg'	'md'
`as`	keyof React.JSX.IntrinsicElements