PAGE 04 · BOXES & CARDS

Boxes & cards

Containers for content. Pick by intent: card for content groupings, callout for editorial asides, alert for state messages, banner for global persistent notices, modal for tasks that demand focus, tooltip for at-a-glance hints.

01.

Cards

Content groupings. Default e-1; raise to e-2 on hover for clickable cards.

Card variants

FRAMEWORK

Default card

Hairline ring + small drop shadow. Used for grouping related content.

HOVER

Hover card

Elevation rises on hover. Whole card is clickable when wrapped in <a>.

DARK

Dark card

For editorial moments or hero panels. Same padding, same radius.

02.

Callouts

Editorial: asides, notes, warnings inside running prose.

Callout variants

Note. Disclosure is not the same as transparency. Transparency is the audience knowing how to read what was disclosed.

Caution. Public benchmark inclusion cannot be reversed once submitted.

Important. Grades are advisory, not regulatory. They do not constitute legal compliance with EU AI Act provisions.

03.

Alerts

In-page state messages. Inline; can be dismissable.

Alert variants

Draft saved

Your assessment is saved. You can return to complete it later from the dashboard.

Assessment submitted

Your Grade-2 certificate is now visible on your public page.

Some answers are incomplete

Sections 4, 6, and 8 have unanswered questions. You can submit a partial assessment with caveats.

Submission failed

We couldn't save your assessment. Please retry, or contact us if the problem persists.

04.

Banners

Global persistent notices. Top of viewport, full bleed.

Top banner · info

05.

Modals

Tasks that need focus. Always have a primary action and a way to dismiss.

Modal · over scrim

06.

Tooltips & popovers

Tooltip: short text only. Popover: rich content, can have actions.

Tooltip & popover

TOOLTIP

POPOVER