Box
- SurfaceFläche
- secondary-000, 1 px secondary-200 framesecondary-000, 1 px Rahmen in secondary-200
- RadiusRadius
- 16 px, one step below the card around it16 px, eine Stufe unter der Karte drumherum
- PaddingInnenabstand
- 16 px on all sides16 px auf allen Seiten
- GapAbstand
- 16 px between header, content and footer16 px zwischen Kopf, Inhalt und Fuß
- HeaderKopfzeile
- Widget header, 32 pxWidget-Kopf, 32 px
- FooterFußleiste
- Buttons share the width equally: two buttons 50/50, 8 px apartButtons teilen sich die Breite gleichmäßig: zwei Buttons 50/50, 8 px Abstand
- ShadowSchatten
- None; boxes lie flat on the pageKeiner; Boxen liegen flach auf der Seite
- Title extrasZusätze am Titel
- Optional dark gray Tag after the title; More options can carry the box’s own menu itemsOptionaler dunkelgrauer Tag nach dem Titel; More options kann eigene Menüeinträge der Box tragen
- App toneApp-Ton
- Primary-100 surface for the one box that leads a page, e.g. a summary or a starting pointFläche Primary-100 für die eine Box, die eine Seite anführt, z. B. eine Zusammenfassung oder ein Einstieg
- DisabledDeaktiviert
- Clickable boxes only (clickable or href): disabled + reason, like the disabled Card button: secondary-100, no frame, all content secondary-400, no hover, not-allowed cursor; stays focusable (aria-disabled), the reason shows as tooltip, nothing opensNur klickbare Boxen (clickable oder href): disabled + reason, wie der deaktivierte Card button: secondary-100, kein Rahmen, aller Inhalt secondary-400, kein Hover, Verbotszeiger; bleibt fokussierbar (aria-disabled), der Grund erscheint als Tooltip, nichts öffnet sich
Every caseAlle Fälle
| ExampleBeispiel | |
|---|---|
| PlainEinfach | |
| HeaderKopfzeile | Positions |
| Header + actionsKopf + Aktionen | Positions |
| App toneApp-Ton | |
| Tag + own menuTag + eigenes Menü | Hall 2 status |
| FooterFußleiste | Positions |
| Clickable · disabledKlickbar · deaktiviert |