Dit blok combineert titelvakken en inhoud in een enkele herbruikbare structuur.
Operators kunnen worden toegevoegd zonder de huidige context te verlaten.
Hoofdzones
Hoofdinformatie kan natuurlijk groeien met standaard spatiëring.
Zijzone
Deze zijzone gebruikt een lichte achtergrond om aanvullende inhoud te benadrukken.
Drie-zone lay-outConcept
Linkerpaneel
Secundaire navigatie of metadata kan hier worden weergegeven.
Hoofdinformatie
Primaire informatie blijft gecentreerd voor leesbaarheid.
Rechterpaneel
Contextuele acties en inzichten kunnen aan deze kant worden gegroepeerd.
Vaste zijkolom
Een smalle kolom van de --grootte schaal, naast een lichaam dat de resterende breedte opneemt.
128Projecties
Primair blok
Een blok met een titel en lichaamstekst.
Secundair blok
Een ander blok om spatiëring te demonstreren.
Kaarten
Primair blok
Een blok met een titel en lichaamstekst.
Secundair blok
Een ander blok om spatiëring te demonstreren.
Tertiar blok
Een derde blok in de rij.
Een markering in de hoek
`block--mark` plaatst een klein pictogram in de bovenste hoek aan het begin van een blok: wat het is — het type van een kaart gelegd in een diagram, het soort document —, naast wat het zegt, geen titel.
Primair blok
Een blok met een titel en lichaamstekst.
Primair blok
Een blok met een titel en lichaamstekst.
Primair blok
Een blok met een titel en lichaamstekst.
Een blok dat een link is
De hele kaart is de link — voor een keuze gemaakt door één kaart uit meerdere te kiezen: een plan, een tak, een sjabloon. Het leest als tekst, niet als een gedempte actie; onder de aanwijzer krijgt de achtergrond een nuance en verstevigt de rand, en het toetsenbord vindt het door de focusring die elke controle heeft.
Een enkele vergrote waarde of icoon, gecentreerd. Gebruikt voor dashboard tellers en status tegels — voeg block--square toe om de tegel vierkant te houden, ongeacht de breedte.
128Projecties
99.9%Uptime
Live
Doorvoer
42Evenementen per seconde
Kerncijfers
Het cijfer gelezen als een kerncijfer van een dashboard: `block--figure--start` legt het vanaf het begin van de regel, het label erboven, de waarde met zijn eenheid naar achteren gezet (`block--figure-unit`), en een regel eronder die zegt waar het uit bestaat (`block--figure-sub`). `block--tone-cat-<name>` tekent de balk van de categorie langs de rand; een `a.block--link` opent het zicht op het cijfer. In een `grid` gaat de rij naar meerdere regels naarmate de ruimte smaller wordt.
De kleur van een staat — of van een categorie — als een balk aan de voorrand, en verder niets: dezelfde balk die een bericht draagt, zonder de gekleurde achtergrond, zodat een lijst van hen als een lijst leest en niet als een alarm. Elk blok kan het dragen, inclusief een balk die op een blok staat.
block--tone-info — de grond blijft van het blok zelf, alleen de voorrand draagt de kleur.
block--tone-success — de grond blijft van het blok zelf, alleen de voorrand draagt de kleur.
block--tone-warning — de grond blijft van het blok zelf, alleen de voorrand draagt de kleur.
block--tone-error — de grond blijft van het blok zelf, alleen de voorrand draagt de kleur.
block--tone-cat-lavender — de grond blijft van het blok zelf, alleen de voorrand draagt de kleur.
Stapels
Horizontaal
Gelijke kolommen, volledige breedte, wikkelt bij overloop.
Eerste kind groeit, laatste kind blijft vast — gebruikt voor lead + actie rijen.
Beschrijf de actie in deze leadtekst.
Acties in een hoek
`has-corner-actions` op een frame — een lead, een blok, een codeblok, een bericht — en zijn pictogramacties in een `corner-actions` erin: in de bovenste hoek aan het einde, getoond terwijl het frame wordt aangewezen of de toetsenbord vasthoudt, altijd op een scherm zonder aanwijzer (`corner-actions--always` om ze permanent te tonen). Een frame met lopende tekst houdt een kolom vrij voor hen.
Deze lead kan worden gekopieerd met de knop in de hoek.
Een blok met twee acties in de hoek, uit de weg totdat het wordt aangewezen.
Genest
Horizontale stapel met verticale stapels — typische dashboard raster.