Dieser Block kombiniert Titelplätze und Inhalte in einer einzelnen wiederverwendbaren Struktur.
Operatoren können hinzugefügt werden, ohne den aktuellen Kontext zu verlassen.
Hauptzone
Hauptinhalt kann natürlich mit standardmäßigem Abstand wachsen.
Nebenzone
Diese Seitenzone verwendet einen hellen Hintergrund, um ergänzenden Inhalt hervorzuheben.
DreizonenslayoutEntwurf
Linkes Panel
Sekundäre Navigation oder Metadaten können hier leben.
Hauptinhalt
Primäre Informationen bleiben zentriert für bessere Lesbarkeit.
Rechtes Panel
Kontextuelle Aktionen und Einblicke können auf dieser Seite gruppiert werden.
Feststehende Seitenleiste
Eine schmale Spalte, die nach der --Größenskala dimensioniert ist, neben einem Hauptinhalt, der die verbleibende Breite aufnimmt.
128Projektionen
Primärer Block
Ein Block mit einem Titel und Text.
Sekundärer Block
Ein weiterer Block zur Demonstration des Abstands.
Karten
Primärer Block
Ein Block mit einem Titel und Text.
Sekundärer Block
Ein weiterer Block zur Demonstration des Abstands.
Tertiärer Block
Ein dritter Block in der Reihe.
Ein Zeichen in der Ecke
`block--mark` legt ein kleines Symbol in die obere Ecke am Anfang eines Blocks: was es ist — der Typ einer Karte, die in einem Diagramm gelegt wird, die Art eines Dokuments —, neben dem, was es sagt, kein Titel.
Primärer Block
Ein Block mit einem Titel und Text.
Primärer Block
Ein Block mit einem Titel und Text.
Primärer Block
Ein Block mit einem Titel und Text.
Ein Block, der ein Link ist
Die gesamte Karte ist der Link — für eine Auswahl, die durch das Auswählen einer Karte aus mehreren getroffen wird: ein Plan, ein Zweig, eine Vorlage. Es wird als Text gelesen, nicht als eine gedämpfte Aktion; unter dem Zeiger nimmt der Hintergrund einen Farbton an und die Kante wird fester, und die Tastatur findet es durch den Fokusring, den jede Steuerung trägt.
Ein einzelner übergroßer Wert oder Icon, zentriert. Wird für Dashboard-Zähler und Statuskacheln verwendet — füge block--square hinzu, um die Kachel quadratisch zu halten, egal wie breit sie ist.
128Projektionen
99.9%Betriebszeit
Live
Durchsatz
42Ereignisse pro Sekunde
Kennzahlen
Die Zahl, die als Kennzahl eines Dashboards gelesen wird: `block--figure--start` legt sie vom Beginn der Zeile, das Label darüber, der Wert mit seiner Einheit zurückgesetzt (`block--figure-unit`), und eine Linie darunter, die sagt, woraus es besteht (`block--figure-sub`). `block--tone-cat-<name>` zieht die Kategorie-Leiste entlang des Randes; ein `a.block--link` öffnet die Ansicht der Zahl. In einem `grid` geht die Zeile auf mehrere Zeilen, wenn der Raum enger wird.
Die Farbe eines Zustands — oder einer Kategorie — als Leiste an der Vorderkante, und nichts anderes: dieselbe Leiste, die eine Nachricht trägt, ohne den gefärbten Hintergrund, damit eine Liste von ihnen als Liste und nicht als Alarm gelesen wird. Jeder Block kann es tragen, auch eine Leiste, die auf einem Block steht.
block--tone-info — Der Boden gehört zum Block, nur die Vorderkante trägt die Farbe.
block--tone-success — Der Boden gehört zum Block, nur die Vorderkante trägt die Farbe.
block--tone-warning — Der Boden gehört zum Block, nur die Vorderkante trägt die Farbe.
block--tone-error — Der Boden gehört zum Block, nur die Vorderkante trägt die Farbe.
block--tone-cat-lavender — Der Boden gehört zum Block, nur die Vorderkante trägt die Farbe.
Stapel
Horizontal
Gleiche Spalten, volle Breite, bricht bei Überlauf um.
Erstes Kind wächst, letztes Kind bleibt fix — verwendet für führende + Aktionsreihen.
Beschreibe die Aktion in diesem einleitenden Text.
Aktionen in der Ecke
`has-corner-actions` auf einem Rahmen — einem Lead, einem Block, einem Codeblock, einer Nachricht — und seinen Symbolaktionen in einem `corner-actions` darin: in der oberen Ecke am Ende, angezeigt, während der Rahmen angezielt wird oder die Tastatur gehalten wird, immer auf einem Bildschirm ohne Zeiger (`corner-actions--always`, um sie dauerhaft anzuzeigen). Ein Rahmen mit laufendem Text hält eine Spalte frei für sie.
Dieser Lead kann mit der Schaltfläche in seiner Ecke kopiert werden.
Ein Block mit zwei Aktionen in seiner Ecke, außer Sicht, bis er angezielt wird.
Verschachtelt
Horizontaler Stapel, der vertikale Stapel enthält — typisches Dashboard-Gitter.