Build a component with tokens

Combine tokens, logical properties and predictable sizing in a card.

Official sourceW3C CSS Logical Properties — component spacing and bordersReviewed: 2026-08-26

STEP 1 · LEARN

How it works

A token describes a reusable decision, a logical property adapts the component to writing direction, and border-box keeps sizing controllable. Together they produce a configurable component rather than a rigid rule.

Correct example

:root { --card-space: 24px; --card-accent: #2563eb; } .card { padding: var(--card-space); border-inline-start: 4px solid var(--card-accent); box-sizing: border-box; } .card-title { color: var(--card-accent); }

Spacing and accent are centralised, while the border follows the inline-start edge.

Common mistake

.card { padding: 24px; border-left: 4px solid #2563eb; } .card-title { color: #2563eb; }

Duplicated values and a physical border only produce a one-off result without the requested configuration and adaptation.

STEP 2 · APPLY

Your exercise

Define the 24px and #2563eb tokens; use them for padding, a 4px inline border, border-box and heading colour.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The spacing token is 24px.
The accent token is #2563eb.
Padding reads the spacing token.
The logical border reads the accent token.
The card uses border-box.
The heading reads the same accent.
The target element is present in the page.

Explain the solution logic

Two tokens feed three visual declarations, while the logical property avoids fixing the accent to the left.

How it works

Your exercise

Write and see the result

What needs to pass