Ce bloc combine des emplacements de titre et du contenu dans une seule structure réutilisable.
Des opérateurs peuvent être ajoutés sans quitter le contexte actuel.
Zone principale
Le contenu principal peut croître naturellement avec un espacement standard.
Zone latérale
Cette zone latérale utilise un fond clair pour mettre en valeur le contenu complémentaire.
Mise en page à trois zonesBrouillon
Panneau gauche
La navigation secondaire ou les métadonnées peuvent vivre ici.
Contenu principal
Les informations principales restent centrées pour la lisibilité.
Panneau droit
Les actions contextuelles et les aperçus peuvent être regroupés de ce côté.
Colonne latérale fixe
Une colonne étroite dimensionnée sur l'échelle --size, à côté d'un corps qui absorbe la largeur restante.
128Projections
Bloc principal
Un bloc avec un titre et un texte de corps.
Bloc secondaire
Un autre bloc pour démontrer l'espacement.
Cartes
Bloc principal
Un bloc avec un titre et un texte de corps.
Bloc secondaire
Un autre bloc pour démontrer l'espacement.
Bloc tertiaire
Un troisième bloc dans la rangée.
Une marque dans le coin
`block--mark` pose une petite icône dans le coin supérieur du début d'un bloc : ce qu'il est — le type d'une carte posée dans un schéma, la nature d'un document —, à côté de ce qu'il dit, pas un titre.
Bloc principal
Un bloc avec un titre et un texte de corps.
Bloc principal
Un bloc avec un titre et un texte de corps.
Bloc principal
Un bloc avec un titre et un texte de corps.
Un bloc qui est un lien
Toute la carte est le lien — pour un choix fait en sélectionnant une carte parmi plusieurs : un plan, une branche, un modèle. Cela se lit comme du texte, pas comme une action atténuée ; sous le pointeur, son sol prend une nuance et son bord se renforce, et le clavier le trouve par l'anneau de focus que chaque contrôle porte.
Une seule valeur ou icône surdimensionnée, centrée. Utilisé pour les compteurs de tableau de bord et les tuiles de statut — ajoutez block--square pour garder la tuile carrée quelle que soit sa largeur.
128Projections
99.9%Temps de disponibilité
En direct
Débit
42Événements par seconde
Chiffres clés
Le chiffre lu comme le chiffre clé d'un tableau de bord : `block--figure--start` le place depuis le début de la ligne, l'étiquette au-dessus, la valeur avec son unité reculé (`block--figure-unit`), et une ligne en dessous disant de quoi il est composé (`block--figure-sub`). `block--tone-cat-<name>` dessine la barre de la catégorie le long du bord ; un `a.block--link` ouvre la vue du chiffre. Dans une `grid`, la ligne s'étend sur plusieurs lignes à mesure que la pièce se rétrécit.
La couleur d'un état — ou d'une catégorie — sous forme de barre sur la bordure avant, et rien d'autre : la même barre qu'un message porte, sans le sol teinté, de sorte qu'une liste de ceux-ci se lit comme une liste et non comme une alarme. Tout bloc peut l'adopter, une barre se tenant sur un bloc inclus.
block--tone-info — le sol reste celui du bloc, seule la bordure avant porte la couleur.
block--tone-success — le sol reste celui du bloc, seule la bordure avant porte la couleur.
block--tone-warning — le sol reste celui du bloc, seule la bordure avant porte la couleur.
block--tone-error — le sol reste celui du bloc, seule la bordure avant porte la couleur.
block--tone-cat-lavender — le sol reste celui du bloc, seule la bordure avant porte la couleur.
Empilements
Horizontal
Colonnes égales, pleine largeur, se replie en cas de débordement.
Le premier enfant grandit, le dernier enfant reste fixe — utilisé pour les lignes de lead + action.
Décrivez l'action dans ce texte de lead.
Actions dans un coin
`has-corner-actions` sur un cadre — un lead, un bloc, un bloc de code, un message — et ses actions d'icône dans un `corner-actions` à l'intérieur : dans le coin supérieur à sa fin, affiché lorsque le cadre est pointé ou maintient le clavier, toujours sur un écran sans pointeur (`corner-actions--always` pour les afficher de manière permanente). Un cadre contenant du texte en cours garde une colonne libre pour eux.
Ce lead peut être copié avec le bouton dans son coin.
Un bloc avec deux actions dans son coin, hors du chemin jusqu'à ce qu'il soit pointé.
Imbriqué
Empilement horizontal contenant des empilements verticaux — grille de tableau de bord typique.