Card
All copy is placeholder. Real strings come from the i18n layer.
Content card
Supper club — spring menu
ConfirmedSaturday 14 March, 19:30 · The Old Bakery · shown in the venue’s timezone
The card is not itself clickable. Controls live inside it — a clickable
<div> is unreachable by keyboard and has no accessible name.
Auth card
Create your account
Checked against known breached passwords.
max-inline-size, never a fixed width — it still works at 320px and when
the browser font size is raised.
Empty state
Authored with the component, not invented later. Says what is missing and offers the fix.
No events yet
Start with a name — a date and venue can come later.
Loading
aria-busy on the container, aria-hidden on the bars — a
screen reader hears “busy”, not three meaningless shapes. The pulse stops entirely
under prefers-reduced-motion.
Grid, and long content
Short title
Two lines of supporting copy.
Veranstaltungsorteinstellungen und Zeitzonenverwaltung
Ein absichtlich sehr langer Text, der zeigt, dass nichts abgeschnitten wird und die Karte mitwächst.
Third
Grid reflows on narrow viewports.