CSS Référence API

La référence de l’API CSS couvre la couche de composants basée sur des classes de pantoken : composants, utilitaires, règles globales et déclarations construits sur le système de tokens.

Composants

Nom	Classe	Résumé
agent-shell	.instui-agent-shell	Un conteneur de surface pour agents d’IA.
alert	.instui-alert	Un message en ligne avec une barre de couleur d’état et un glyphe d’état masqué issu de la bibliothèque d’icônes partagée.
avatar	.instui-avatar	Un avatar utilisateur affichant des initiales ou une image, circulaire par défaut.
badge	.instui-badge	Un petit point de comptage ou d’état placé sur le coin d’une cible.
banner	.instui-banner	Une surface de message iconée et dismissible pour des annonces au niveau de la page ou en contexte.
billboard	.instui-billboard	Un grand bloc d’état vide ou d’appel à l’action : une icône ou image principale, un titre et un message.
breadcrumb	.instui-breadcrumb	Un fil d’Ariane avec séparateurs ; le dernier élément est la page courante.
breadcrumb.link	li	Un élément de fil (InstUI Breadcrumb.Link), un <li> dans le <ol> du parent ; le dernier est la page courante.
button	.instui-button	Un contrôle d’action accessible, stylisé depuis la palette de tokens ; primaire par défaut.
byline	.instui-byline	Un objet média : une figure principale à côté d’un titre et d’une description.
calendar	.instui-calendar	Une grille de mois statique avec navigation, en-têtes des jours de la semaine et cellules de jour.
calendar.day	.day	Une cellule de jour (InstUI Calendar.Day) ; -today, -selected et -outside-month indiquent son état.
card	.instui-card	Un conteneur de surface qui accepte un contenu arbitraire.
checkbox	.instui-checkbox	Une case à cocher native et son étiquette, ou un interrupteur via -variant-toggle.
close-button	.instui-close-button	Un bouton icône transparent qui dessine son propre glyphe ×, en trois tailles plus une variante sur couleur.
context-view	.instui-context-view	Un callout surélevé avec une flèche, positionnable sur n’importe quel côté ; fonctionne comme un [popover] natif.
drawer-layout	.instui-drawer-layout	Une mise en page divisée avec un tiroir latéral rétractable et un panneau de contenu principal défilant.
drawer-layout.content	.content	Le panneau de contenu principal qui remplit l’espace restant à côté du tiroir.
drawer-layout.tray	.tray	Le panneau latéral à côté du contenu principal, avec superposition optionnelle et modificateurs de surface de type tiroir.
file-drop	.instui-file-drop	Une zone de dépôt de fichiers avec états survol, accepté et rejeté.
form-field	.instui-form-field	Un wrapper de champ de formulaire : une étiquette, ses contrôles, et des dispositions inline, requises ou en lecture seule.
form-field-group	.instui-form-field-group	Un groupe <fieldset> avec une légende, une disposition en colonne ou en ligne, et un espacement configurable.
form-field-messages	.instui-form-field-messages	Aide de champ et messages de validation — indice, erreur, succès et uniquement pour lecteur d’écran — avec un glyphe sur erreur et succès.
heading	.instui-heading	Typographie de titres de -level-h1 à -level-h6.
img	.instui-img	Un <img> stylisé avec des modificateurs d’affichage, de recadrage et d’effet qui se superposent.
in-place-edit	.instui-in-place-edit	Un [contenteditable] qui se lit comme du texte jusqu’à ce qu’il soit focalisé, puis affiche l’interface d’entrée.
input-group	.instui-input-group	Une façade autour d’un champ de texte avec des emplacements d’icônes au début et à la fin.
link	.instui-link	Un lien stylisé avec tailles, variante inverse pour fonds sombres, et formes inline ou non stylisées.
list	.instui-list	Une liste avec espacement des éléments piloté par des tokens.
list.item	.instui-list	Un élément de liste (InstUI List.Item).
mask	.instui-mask	Un overlay en flux qui remplit son parent positionné et centre son contenu — p.ex. un spinner sur une carte. Pour une modale, préférer un <dialog> natif (son ::backdrop est le masque). Chacun de ces modificateurs est aussi disponible globalement (nu, ou chainé sur n’importe quel autre composant) — voir l’utilitaire global mask.
menu	.instui-menu	Une surface déroulante d’éléments, de groupes et de séparateurs.
menu.group	.group	Un en-tête de groupe étiqueté (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Une entrée de menu (InstUI Menu.Item) ; ajouter -disabled, -highlighted, ou -active/[aria-checked].
menu.separator	.separator	Une règle de séparation entre éléments (InstUI Menu.Separator).
metric	.instui-metric	Une statistique étiquetée — une grande valeur au-dessus d’une légende.
modal	.instui-modal	Une surface de dialogue (fonctionne sur un <dialog> natif) ; parties en-tête/corps/pied.
modal.body	.body	La région de contenu (InstUI Modal.Body) ; un seul <img> occupe toute la largeur.
modal.footer	.footer	La rangée d’actions (InstUI Modal.Footer).
modal.header	.header	La rangée de titre (InstUI Modal.Header).
number-input	.instui-number-input	Une façade d’entrée numérique avec une colonne de spinner +/-.
pagination	.instui-pagination	Navigation de page : pages numérotées, flèches première/précédente/suivante/dernière, et une ellipse pour les lacunes.
pagination.page	.page	Un lien ou bouton de page (InstUI Pagination.Page) ; la page courante porte [aria-current].
pill	.instui-pill	Une étiquette de statut compacte ; ajouter un glyphe en tête avec la forme partagée -icon-<name>.
popover	.instui-popover	Une surface surélevée pour un [popover] natif, positionnée avec le positionnement d’ancrage CSS.
progress	.instui-progress	Une barre de progression déterminée avec un mètre coloré, des tailles et une étiquette de valeur optionnelle.
progress-circle	.instui-progress-circle	Un anneau de progression circulaire piloté par les propriétés personnalisées --value et --value-max.
radio	.instui-radio	Un bouton radio natif et son étiquette.
radio-input-group	.instui-radio-input-group	Un <fieldset> radio à sélection unique, simple ou comme un bascule segmentée connectée.
range-input	.instui-range-input	Un curseur range stylisé avec une bulle de valeur inverse.
rating	.instui-rating	Une cote par étoiles avec glyphes remplis et vides et une étiquette numérique facultative.
side-nav-bar	.instui-side-nav-bar	Une barre de navigation verticale composée d’icônes au-dessus d’étiquettes, avec un mode réduit affichant uniquement les icônes.
side-nav-bar.item	.item	Une entrée de navigation (InstUI SideNavBar.Item); -selected indique celle qui est active.
simple-select	.instui-simple-select	Un <select> natif stylisé avec un caret, assorti aux états et tailles du champ de texte.
spinner	.instui-spinner	Un anneau de chargement animé ; lui attribuer role="status" et une aria-label.
table	.instui-table	Un tableau de données stylisé pour th et td plus une légende optionnelle, avec dispositions sur survol, fixe et en cartes empilées.
table.body	tbody	Le groupe de lignes de données du tableau (InstUI Table.Body).
table.cell	td	Une cellule de données (InstUI Table.Cell).
table.col-header	th	Une cellule d’en‑tête de colonne (InstUI Table.ColHeader) ; le style par défaut th est remplacé par table.row-header pour th[scope="row"].
table.head	thead	Le groupe de lignes d’en‑tête du tableau (InstUI Table.Head).
table.row	tr	Une ligne de tableau (InstUI Table.Row).
table.row-header	th[scope="row"]	Une cellule d’en‑tête de ligne (InstUI Table.RowHeader) ; stylisée à partir des jetons d’en‑tête de ligne, et non de ceux d’en‑tête de colonne.
tabs	.instui-tabs	Un ensemble d’onglets : une liste d’onglets, des onglets sélectionnables et leurs panneaux.
tabs.panel	.panel	Le panneau de contenu pour un onglet (InstUI Tabs.Panel).
tabs.tab	.tab	Un seul bouton d’onglet (InstUI Tabs.Tab, configuré via la liste d’onglets du parent Tabs) ; -selected indique celui qui est actif.
tag	.instui-tag	Une puce en ligne pour un mot‑clé ou un filtre.
text	.instui-text	Typographie pour le texte de corps avec modificateurs de taille, poids, couleur et style.
text-area	.instui-text-area	Un <textarea> natif redimensionnable stylisé avec les mêmes états et tailles que le champ de texte.
text-input	.instui-text-input	Un <input> natif stylisé — incluant date, time et datetime-local, où le navigateur fournit le sélecteur — avec états de validation et tailles.
toggle-details	.instui-toggle-details	Un <details> natif stylisé de type disclosure avec un chevron rotatif.
toggle-group	.instui-toggle-group	Un disclosure encadré construit sur <details> : une ligne sommaire avec chevron et un contenu rétractable.
tooltip	.instui-tooltip	Une bulle d’infobulle CSS pour hover et focus, positionnable de n’importe quel côté.
tray	.instui-tray	Un panneau épinglé au bord qui glisse depuis n’importe quel côté ; un [popover] ou <dialog> natif.
tree-browser	.instui-tree-browser	Un arbre de disclosure composé de collections imbriquées et d’éléments feuilles, avec chevrons rotatifs.
view	.instui-view	Le primitif View : une boîte neutre avec modificateurs clé‑valeur pour arrière‑plan, bordure, rayon, ombre, affichage, position, débordement et curseur. Chacun de ces modificateurs est aussi disponible globalement (nu, ou chaîné à tout autre composant) — voir les utilitaires background/border/shadow/display/position/overflow/cursor.

Utilitaires

Nom	Classe	Résumé
color	.--text-danger	Utilitaires de couleur sémantique : .--bg-<name>, .--text-<name> (aliasé comme .--color-<name>) et .--border-<name> pour la palette sémantique sélectionnée. Chacun a aussi un modificateur alias attaché au composant (par exemple -bg-danger sur n’importe quel .instui-<component>).
cursor	.--cursor-pointer	cursor comme classe globale composable — .--cursor-<value> — utilisable nue ou chaînée à tout composant (.instui-button.--cursor-pointer).
gap	.--gap-md	Utilitaires gap flex/grid sur l’échelle d’espacement, orthographe courte (--gap-sm) ou longue (--gap-small). Utilisable nue ou chaînée à tout composant (.instui-view.--gap-sm) — les composants qui définissent déjà leur propre gap via un jeton spécifique au composant peuvent le voir remplacé.
icon	.instui-icon	Le système d’icônes : dimensionnement .instui-icon plus le peintre partagé -icon-<name> qui masque un glyphe (dans currentColor) avant tout élément.
layout	.--display-flex	Utilitaires d’affichage et d’alignement du texte — .--display-<value> et .--text-align-<value> — comme classes globales composables, utilisables nues ou chaînées à tout composant.
maskglobal	.--mask-overlay	Une copie globale et double des modificateurs d’overlay du composant mask — --mask-overlay, --mask-fullscreen, --mask-blur — utilisable nue ou chaînée à tout composant, sans envelopper dans un élément .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y comme classes globales composables — .--overflow-x-<value> / .--overflow-y-<value> — utilisables nues ou chaînées à tout composant.
position	.--position-relative	position comme classe globale composable — .--position-<value> — utilisable nue ou chaînée à tout composant (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Classes d’affichage/masquage selon la largeur de la fenêtre ou du conteneur sur une échelle de points de rupture thématisés.
screen-reader-content	.instui-screen-reader-content	Masque visuel du contenu tout en le gardant disponible pour les technologies d’assistance (le motif standard de clip).
spacing	.--p-md	Utilitaires de marge et de remplissage — .--m<side>-<step> / .--margin-<side>-<step> et .--p<side>-<step> / .--padding-<side>-<step> sur l’échelle d’espacement (côtés t/b/s/e/x/y ou aucun, écrits courts ou longs — par exemple --mb-sm et --margin-bottom-small sont la même règle ; la marge accepte aussi auto). Utilisables seuls ou chaînés à n’importe quel composant (par exemple class="instui-view --mb-sm").
stacking	.--stack-topmost	Utilitaires de profondeur z-index — .--stack-<level> (deepest, below, above, topmost) — utilisables seuls ou chaînés à n’importe quel composant, pour que les couches s’empilent de façon prévisible plutôt qu’avec des nombres ajustés à la main.
transition	.instui-transition.-transition-fade-entering	Classes d’état d’animation pour le composant Transition — .instui-transition et classes d’état (-transition-fade-entering, -transition-scale-exited, etc.) — utilisables seuls ou chaînés à n’importe quel composant.
truncate	.--truncate	Tronquage avec ellipsis et limitation de lignes contrôlée par --lines — utilisable seul ou chaîné à n’importe quel composant (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Contour de débogage de mise en page : composer .-with-visual-debug sur n’importe quel élément pour entourer la boîte et ses enfants immédiats, afin que la structure de la mise en page soit visible d’un coup d’œil.

Règles

Nom	Classe	Résumé
base	*	Réinitialisation globale opt-in : box-sizing, la surface de la page, la couleur et la police de base, color-scheme, et les valeurs par défaut des liens.
prose	:where(body)	Paramètres typographiques par défaut pour le HTML brut — titres, paragraphes, listes, liens et code — appliqués automatiquement partout où c’est importé (par défaut :where(body)) ; passez options.scope pour cibler une racine de contenu différente (par ex. .vp-doc).

Plugins

Nom	Classe	Résumé
logos	.logos	Logos produits Instructure en tokens d’image CSS : --instui-logo-<product>-<layout>-<mode> contient un SVG en data-URI, donc un logo se peint via p. ex. background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Classes utilitaires opt-in pour la palette primitive brute : .instui-bg-/fg-/border-primitive-color-<name> appliquent une couleur à partir des tokens de couleur primitifs, plus les utilitaires font-family/font-weight pour les tokens de police primitifs. Exclues des utilitaires sémantiques pour que les overrides restent uniquement sémantiques.
visual-debug	.-with-visual-debug	Contour de débogage de mise en page : composer .-with-visual-debug sur n’importe quel élément pour entourer la boîte et ses enfants immédiats, afin que la structure de la mise en page soit visible d’un coup d’œil.

layout

Nom	Classe	Résumé
callout	div[class~="instui-callout"]	Alerte d’information en ligne pour un rappel ou une note courte.
hero	div[class~="instui-hero"]	Section d’en-tête pleine largeur avec titre, sous-titre et image d’arrière-plan optionnelle.
page-layout	div[class~="instui-page-layout"]	Mise en page standard à trois colonnes avec en-tête, barre latérale et contenu principal.
rubric-note	div[class~="instui-rubric-note"]	Note structurée avec catégories de rubrique et indicateurs de notation.
testimonial	div[class~="instui-testimonial"]	Affichage de citation ou témoignage avec attribution et image optionnelle.
two-column	div[class~="instui-two-column"]	Mise en page à deux colonnes avec régions de contenu gauche et droite.
wrapper	body[class~="instui-display-flex"]	Ligne d’interface d’application : nav latérale, conteneur avec en-tête et panneau optionnel.