# Class recipes (plain HTML) The same markup the React components render. Load `@enma-design/css` (or inline `enma.css` in an artifact), set the root and use these classes. Class prefix `e-`. ```html ... ``` ```html

Weekly volume

+8%

Paid

Bench press4 × 8 · 80 kg
Settings

Workspace name

Shown on invoices.

Invoices
Customer	Amount
Northwind	$1,240.00

Rest timer Warm-up done

Weekly goal4 of 5 sessions

Invoice sent

Northwind will get it in a minute.

``` Type helpers: `e-display-xl`, `e-display`, `e-title`, `e-heading`, `e-body-lg`, `e-body`, `e-label`, `e-caption`, `e-eyebrow`, `e-num`, `e-meta`. `e-visually-hidden` keeps text for screen readers only. Your own elements: use only `--e-*`, `--space-*`, `--control-*`, `--duration-*` and `--easing-*`. ```css .screen { display: grid; gap: var(--space-3); padding: var(--space-4); } .panel { background: var(--e-surface); border-radius: var(--e-r-lg); box-shadow: var(--e-shadow-card); } ```