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 IA.
alert	.instui-alert	Un message en ligne avec une barre de couleur d'état et un glyphe d'état masqué provenant de l'ensemble d'icônes partagé.
avatar	.instui-avatar	Un avatar utilisateur affichant des initiales ou une image, circulaire par défaut.
badge	.instui-badge	Un petit point de compteur ou d'état placé sur le coin d'une cible.
banner	.instui-banner	Une surface de message dismissible avec icône pour des annonces au niveau de la page ou contextuelles.
billboard	.instui-billboard	Un grand bloc d'état vide ou d'appel à l'action : une icône ou une image héro, un titre et un message.
breadcrumb	.instui-breadcrumb	Un fil d'Ariane avec séparateurs ; le dernier élément représente 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, stylé à partir de la palette de tokens ; primaire par défaut.
byline	.instui-byline	Un objet média : une figure héro à 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 jours.
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 libellé, 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 caret, positionnable sur n'importe quel côté ; fonctionne comme un [popover] natif.
drawer-layout	.instui-drawer-layout	Une mise en page partagée avec un tiroir latéral rétractable et une zone de contenu principale défilable.
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 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 : un libellé, ses contrôles, et des dispositions inline, required ou readonly.
form-field-group	.instui-form-field-group	Un groupe <fieldset> avec une légende, une disposition en colonne ou inline, et un espacement configurable.
form-field-messages	.instui-form-field-messages	Aide de champ et messages de validation — hint, erreur, succès et uniquement pour lecteur d'écran — avec un glyphe en cas d'erreur et de succès.
heading	.instui-heading	Typographie de titres de -level-h1 à -level-h6.
img	.instui-img	Un <img> stylé avec des modificateurs d'affichage, de recadrage et d'effets qui se superposent.
in-place-edit	.instui-in-place-edit	Un [contenteditable] qui se lit comme du texte jusqu'à la focalisation, puis affiche l'interface d'entrée.
input-group	.instui-input-group	Une façade autour d'un champ de texte avec emplacements d'icônes en début et fin.
link	.instui-link	Un lien stylé avec des tailles, une variante inverse pour fonds sombres, et des formes inline ou non stylé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	Une superposition en flux qui remplit son parent positionné et centre son contenu — par 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 enchaîné sur n'importe quel autre composant) — voir l'utilitaire global mask.
menu	.instui-menu	Une surface déroulante d'éléments, groupes et 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 header/body/footer.
modal.body	.body	La région de contenu (InstUI Modal.Body) ; un seul <img> s'étend en full-bleed.
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 et dernière, et une ellipse pour les gaps.
pagination.page	.page	Un lien ou bouton de page (InstUI Pagination.Page) ; la page actuelle porte [aria-current].
pill	.instui-pill	Un label d'état compact ; ajouter un glyphe au début avec la forme -icon-<name> partagée.
popover	.instui-popover	Une surface surélevée pour un [popover] natif, positionnée avec l'anchor positioning CSS.
progress	.instui-progress	Une barre de progression déterminée avec un indicateur coloré, des tailles et une étiquette de valeur optionnelle.
progress-circle	.instui-progress-circle	Un anneau de progression circulaire animé par les propriétés personnalisées --value et --value-max.
radio	.instui-radio	Un bouton radio natif et son libellé.
radio-input-group	.instui-radio-input-group	Un <fieldset> radio à sélection unique, simple ou en tant que bascule segmentée connectée.
range-input	.instui-range-input	Un slider de plage stylé avec une bulle de valeur inverse.
rating	.instui-rating	Une évaluation par étoiles avec glyphes remplis et vides et une étiquette numérique optionnelle.
side-nav-bar	.instui-side-nav-bar	Un rail de navigation vertical d’éléments icône-sur-étiquette, avec un mode minimisé affichant uniquement les icônes.
side-nav-bar.item	.item	Une entrée de navigation (InstUI SideNavBar.Item) ; -selected marque celle qui est active.
simple-select	.instui-simple-select	Un <select> natif stylisé avec un caret, correspondant aux états et tailles des champs de texte.
spinner	.instui-spinner	Un anneau de chargement animé ; lui donner 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 au survol, fixes 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 tokens d’en-tête de ligne, pas ceux d’en-tête de colonne.
tabs	.instui-tabs	Un ensemble de panneaux à 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 marque celui qui est actif.
tag	.instui-tag	Une puce en ligne pour un mot-clé ou un filtre.
text	.instui-text	Typographie de texte principal avec modificateurs de taille, de graisse, de couleur et de style.
text-area	.instui-text-area	Un <textarea> natif stylisé et redimensionnable ayant 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	Une divulgation <details> native stylisée avec un chevron rotatif.
toggle-group	.instui-toggle-group	Une divulgation bordée construite sur <details> : une ligne résumé avec chevron et un contenu repliable.
tooltip	.instui-tooltip	Une bulle d’info au survol et au focus en CSS, positionnable sur n’importe quel côté.
tray	.instui-tray	Un panneau épinglé sur le bord qui glisse depuis n’importe quel côté ; un [popover] ou <dialog> natif.
tree-browser	.instui-tree-browser	Un arbre de divulgation 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 enchaîné sur n’importe quel autre composant) — voir les utilitaires background/border/shadow/display/position/overflow/cursor.

Utilitaires

Nom	Classe	Résumé
color	.--text-danger	Utilitaires de couleurs sémantiques : .--bg-<name>, .--text-<name> (aliasé en .--color-<name>), et .--border-<name> pour la palette sémantique sélectionnée. Chacun d’eux a aussi un modificateur d’alias attaché au composant (par exemple -bg-danger sur n’importe quel .instui-<component>).
cursor	.--cursor-pointer	cursor en tant que classe globale composable — .--cursor-<value> — utilisable nue ou enchaînée sur n’importe quel composant (.instui-button.--cursor-pointer).
gap	.--gap-md	Utilitaires flex/grille gap sur l’échelle d’espacement, orthographe courte (--gap-sm) ou longue (--gap-small). Utilisable nue ou enchaînée sur n’importe quel composant (.instui-view.--gap-sm) — les composants qui définissent déjà leur propre gap à partir d’un token spécifique au composant peuvent le voir remplacé.
icon	.instui-icon	Le système d’icônes : tailles .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> — en tant que classes globales composables, utilisables nues ou enchaînées sur n’importe quel composant.
maskglobal	.--mask-overlay	Une double copie globale des modificateurs d’overlay du composant mask — --mask-overlay, --mask-fullscreen, --mask-blur — utilisable nue ou enchaînée sur n’importe quel composant, sans envelopper dans un élément .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y en tant que classes globales composables — .--overflow-x-<value> / .--overflow-y-<value> — utilisables nues ou enchaînées sur n’importe quel composant.
position	.--position-relative	position en tant que classe globale composable — .--position-<value> — utilisable nue ou enchaînée sur n’importe quel composant (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Classes d’affichage/cacher selon la largeur de la fenêtre ou du conteneur sur une échelle de points d’arrêt thémée.
screen-reader-content	.instui-screen-reader-content	Masque visuellement le contenu tout en le gardant accessible aux technologies d’assistance (le motif standard de clip).
spacing	.--p-md	Utilitaires de marge et de padding — .--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, abrégé ou en toutes lettres — par exemple --mb-sm et --margin-bottom-small sont la même règle ; la marge accepte aussi auto). Utilisable seul ou chaîné à 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 sur n'importe quel composant, pour que les couches s'empilent de façon prévisible plutôt que par des nombres ajustés manuellement.
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 seules ou chaînées sur n'importe quel composant.
truncate	.--truncate	Tronquage par ellipse avec 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	Un contour de débogage de mise en page : apposer le composé .-with-visual-debug sur n'importe quel élément pour délimiter la boîte et ses enfants immédiats, afin que la structure de la mise en page soit visible en 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 du texte, color-scheme, et les paramètres 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)) ; passer 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 tant que tokens image CSS : --instui-logo-<product>-<layout>-<mode> contient un SVG en data-URI, ainsi un logo s'affiche via par 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. Tenus à l'écart des utilitaires sémantiques afin que les overrides restent purement sémantiques.
visual-debug	.-with-visual-debug	Un contour de débogage de mise en page : apposer le composé .-with-visual-debug sur n'importe quel élément pour délimiter la boîte et ses enfants immédiats, afin que la structure de la mise en page soit visible en 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 de témoignage avec attribution et image optionnelle.
two-column	div[class~="instui-two-column"]	Mise en page en deux colonnes avec régions de contenu gauche et droite.
wrapper	body[class~="instui-display-flex"]	Ligne d'app-shell : navigation latérale, conteneur avec en-tête et panneau optionnel.