Blocchi

Blocchi di base

Blocco primario

Un blocco con un titolo e un testo di corpo.

Blocco senza padding (utilizzando block--body).

Titolo del blocco

Un blocco con un titolo e un testo di corpo.

Blocco primario

Un blocco con un titolo e un testo di corpo.

Blocco secondario

Un altro blocco per dimostrare il distanziamento.

Blocco primario

Un blocco con un titolo e un testo di corpo.

Blocco secondario

Un altro blocco per dimostrare il distanziamento.

Blocco terziario

Un terzo blocco nella riga.

Blocco primario

Un blocco con un titolo e un testo di corpo.

Blocco secondario

Un altro blocco per dimostrare il distanziamento.

Blocco terziario

Un terzo blocco nella riga.

Blocco quaternario

Un quarto blocco per la demo del layout.

Blocco secondario

Un altro blocco per dimostrare il distanziamento.

Blocchi avanzati

Proiezione della pipeline Pronto

Panoramica Attività Impostazioni

Questo blocco combina slot di titolo e contenuto in una singola struttura riutilizzabile.

Gli operatori possono essere aggiunti senza lasciare il contesto attuale.

Zona principale

Il contenuto principale può crescere naturalmente con distanziamento standard.

Zona laterale

Questa zona laterale utilizza uno sfondo chiaro per evidenziare contenuti complementari.

Layout a tre zone Bozza

Pannello sinistro

La navigazione secondaria o i metadati possono trovarsi qui.

Contenuto principale

Le informazioni primarie rimangono centrate per leggibilità.

Pannello destro

Azioni contestuali e approfondimenti possono essere raggruppati su questo lato.

Colonna fissa laterale

Una colonna stretta dimensionata sulla scala --size, accanto a un corpo che assorbe la larghezza rimanente.

128 Proiezioni

Blocco primario

Un blocco con un titolo e un testo di corpo.

Blocco secondario

Un altro blocco per dimostrare il distanziamento.

Schede

Blocco primario

Un blocco con un titolo e un testo di corpo.

Blocco secondario

Un altro blocco per dimostrare il distanziamento.

Blocco terziario

Un terzo blocco nella riga.

Un marchio nell'angolo

`block--mark` posiziona una piccola icona nell'angolo in alto all'inizio di un blocco: cosa rappresenta — il tipo di una scheda posizionata in un diagramma, il tipo di un documento —, accanto a ciò che dice, non un titolo.

Blocco primario

Un blocco con un titolo e un testo di corpo.

Blocco primario

Un blocco con un titolo e un testo di corpo.

Blocco primario

Un blocco con un titolo e un testo di corpo.

Un blocco che è un link

L'intera scheda è il link — per una scelta fatta selezionando una scheda tra diverse: un piano, un ramo, un modello. Si legge come testo, non come un'azione attutita; sotto il cursore il suo fondo assume una sfumatura e il suo bordo si indurisce, e la tastiera lo trova grazie all'anello di messa a fuoco che ogni controllo indossa.

Inizio Una persona, le basi, nulla da pagare. Team Alcune persone che lavorano sulle stesse cose. Azienda Ogni team, con i controlli richiesti da un'organizzazione.

Figure

Un singolo valore o icona sovradimensionato, centrato. Utilizzato per contatori del dashboard e riquadri di stato — aggiungi block--square per mantenere il riquadro quadrato qualunque sia la sua larghezza.

128 Proiezioni

99.9% Tempo di attività

Attivo

Throughput

42 Eventi al secondo

Indicatori chiave

L'indicatore letto come figura chiave di un cruscotto: `block--figure--start` lo posiziona dall'inizio della riga, l'etichetta sopra, il valore con la sua unità arretrata (`block--figure-unit`), e una linea sotto che dice di cosa è composto (`block--figure-sub`). `block--tone-cat-<name>` disegna la barra della categoria lungo il bordo; un `a.block--link` apre la vista dell'indicatore. In una `grid`, la riga si estende su più righe man mano che lo spazio si restringe.

Rilanciare 7 123 pezzi · 4 gruppi

Carica 92% 3 gruppi oltre l'85 %

Intessuto questa settimana 1,284m² 41 ordini

Ordini in ritardo 3 2 a rischio la prossima settimana

Un blocco che porta un tono

Il colore di uno stato — o di una categoria — come una barra lungo il bordo anteriore, e nient'altro: la stessa barra che indossa un messaggio, senza il terreno colorato, così una lista di essi appare come una lista e non come un allarme. Qualsiasi blocco lo può avere, compresa una barra che poggia su un blocco.

block--tone-info — il terreno rimane di proprietà del blocco, solo il bordo anteriore porta il colore.

block--tone-success — il terreno rimane di proprietà del blocco, solo il bordo anteriore porta il colore.

block--tone-warning — il terreno rimane di proprietà del blocco, solo il bordo anteriore porta il colore.

block--tone-error — il terreno rimane di proprietà del blocco, solo il bordo anteriore porta il colore.

block--tone-cat-lavender — il terreno rimane di proprietà del blocco, solo il bordo anteriore porta il colore.

Stack

Orizzontale

Colonne uguali, a piena larghezza, si avvolgono in caso di sovrapposizione.

Uno

Due

Tre

Quattro

Verticale

Righe impilate, a piena larghezza, intervallo uniforme.

Uno

Due

Tre

Diviso

Il primo figlio cresce, l'ultimo rimane fisso — utilizzato per righe di lead + azione.

Descrivi l'azione in questo testo di lead.

Azioni in un angolo

`has-corner-actions` su un frame — un lead, un blocco, un blocco di codice, un messaggio — e le sue azioni icona in un `corner-actions` all'interno: nell'angolo in alto alla sua estremità, mostrato mentre il frame è puntato o tiene la tastiera, sempre su uno schermo senza puntatore (`corner-actions--always` per mostrarli per sempre). Un frame con testo in esecuzione mantiene una colonna libera per essi.

Questo lead può essere copiato con il pulsante nel suo angolo.

Un blocco con due azioni nel suo angolo, fuori strada fino a quando non viene puntato.

Annidato

Stack orizzontale contenente stack verticali — tipico della griglia del dashboard.

ONEONE

ONETWO

ONETHREE

TWOONE

TWOTWO

TWOTHREE

THREEONE

THREETWO

THREETHREE