CSS API-referentie

De CSS-API-referentie behandelt pantoken's op klassen gebaseerde componentlaag: componenten, utilities, globale regels en declaraties die zijn opgebouwd op het tokensysteem.

Componenten

Naam	Klasse	Samenvatting
agent-shell	.instui-agent-shell	Een oppervlakcontainer voor AI-agents.
alert	.instui-alert	Een inline bericht met een statuskleurbalk en een gemaskeerd statuspictogram uit de gedeelde iconenset.
avatar	.instui-avatar	Een gebruikersavatar die initialen of een afbeelding toont, standaard cirkelvormig.
badge	.instui-badge	Een kleine telling- of statusdot geplaatst op de hoek van een doelobject.
banner	.instui-banner	Een wegklikbaar, geïconiseerde berichtoppervlak voor paginaniveau- of contextuele aankondigingen.
billboard	.instui-billboard	Een groot empty-state- of call-to-action-blok: een hero-pictogram of afbeelding, een kop en een bericht.
breadcrumb	.instui-breadcrumb	Een broodkruimelpad met scheiders; het laatste broodkruim is de huidige pagina.
breadcrumb.link	li	Een broodkruim (InstUI Breadcrumb.Link), een <li> in de <ol> van de ouder; de laatste is de huidige pagina.
button	.instui-button	Een toegankelijke actiecontrole, gestyled vanuit het tokenpalet; standaard primary.
byline	.instui-byline	Een mediaobject: een hero-afbeelding naast een titel en beschrijving.
calendar	.instui-calendar	Een statische maandoverzichtsgrid met navigatie, weekdagh headers en dagcellen.
calendar.day	.day	Een dagcel (InstUI Calendar.Day); -today, -selected en -outside-month geven de staat aan.
card	.instui-card	Een oppervlakcontainer die willekeurige inhoud accepteert.
checkbox	.instui-checkbox	Een native checkbox en het bijbehorende label, of een schakelaar via -variant-toggle.
close-button	.instui-close-button	Een transparante icoonknop die zijn eigen ×-pictogram tekent, in drie maten plus een on-color variant.
context-view	.instui-context-view	Een verheven callout met een caret, positioneerbaar aan elke zijde; werkt als een native [popover].
drawer-layout	.instui-drawer-layout	Een gesplitste lay-out met een inklapbare zijklep en een primaire scrollbare inhoudspaneel.
drawer-layout.content	.content	Het primaire inhoudspaneel dat de resterende ruimte naast de tray vult.
drawer-layout.tray	.tray	Het zijpaneel naast de hoofdinhoud, met optionele overlay en tray-achtige oppervlakmodifiers.
file-drop	.instui-file-drop	Een file-dropzone met hover-, geaccepteerd- en afgewezen-staten.
form-field	.instui-form-field	Een formulierveld-wrapper: een label, de controls en inline-, required- of readonly-layouts.
form-field-group	.instui-form-field-group	Een <fieldset>-groep met een legend, een kolom- of inline-indeling en configureerbare tussenruimtes.
form-field-messages	.instui-form-field-messages	Veldhulp en validatieberichten — hint, fout, succes en alleen-screenreader — met een pictogram bij fout en succes.
heading	.instui-heading	Heading-typografie van -level-h1 tot -level-h6.
img	.instui-img	Een gestylede <img> met display-, crop- en effectmodifiers die stapelen.
in-place-edit	.instui-in-place-edit	Een [contenteditable] die als tekst wordt gelezen tot focus, waarna invoerchrome verschijnt.
input-group	.instui-input-group	Een facade rond een tekstinvoer met slots voor voor- en achterliggende iconen.
link	.instui-link	Een gestylede hyperlink met maten, een inverse variant voor donkere achtergronden, en inline- of ongestylede vormen.
list	.instui-list	Een lijst met token-gestuurde itemtussenruimte.
list.item	.instui-list	Een lijstitem (InstUI List.Item).
mask	.instui-mask	Een in-flow overlay die zijn gepositioneerde ouder vult en de inhoud centreert — bijv. een spinner over een kaart. Voor een modal verdient een native <dialog> de voorkeur (zijn ::backdrop is het masker). Elk van deze modifiers is ook globaal beschikbaar (naakt, of gekoppeld aan elk ander component) — zie de mask globale utility.
menu	.instui-menu	Een dropdown-oppervlak van items, groepen en scheiders.
menu.group	.group	Een gelabelde groepstitel (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Een menu-item (InstUI Menu.Item); voeg -disabled, -highlighted of -active/[aria-checked] toe.
menu.separator	.separator	Een scheidingslijn tussen items (InstUI Menu.Separator).
metric	.instui-metric	Een gelabelde statistiek — een grote waarde boven een bijschrift.
modal	.instui-modal	Een dialoogoppervlak (werkt op een native <dialog>); header/body/footer-delen.
modal.body	.body	Het contentgebied (InstUI Modal.Body); een enkele <img> gaat full-bleed.
modal.footer	.footer	De actie-rij (InstUI Modal.Footer).
modal.header	.header	De titelrij (InstUI Modal.Header).
number-input	.instui-number-input	Een number-input-facade met een +/- spinnerkolom.
pagination	.instui-pagination	Paginanavigatie: genummerde pagina's, eerste, vorige, volgende en laatste pijlen, en een ellipsis voor onderbrekingen.
pagination.page	.page	Een paginalink of knop (InstUI Pagination.Page); de huidige pagina draagt [aria-current].
pill	.instui-pill	Een compacte statuslabel; voeg een leidend pictogram toe met de gedeelde -icon-<name>-vorm.
popover	.instui-popover	Een verheven oppervlak voor een native [popover], gepositioneerd met CSS anchor-positioning.
progress	.instui-progress	Een determinate voortgangsbalk met een gekleurde meter, maten en een optioneel waardelabel.
progress-circle	.instui-progress-circle	Een cirkelvormige voortgangsring aangestuurd door --value en --value-max custom properties.
radio	.instui-radio	Een native radio button en het bijbehorende label.
radio-input-group	.instui-radio-input-group	Een single-select radio <fieldset>, simpel of als verbonden gesegmenteerde toggle.
range-input	.instui-range-input	Een gestylede range-slider met een inverse waarde-bubble.
rating	.instui-rating	Een sterbeoordeling met gevulde en lege pictogrammen en een optioneel numeriek label.
side-nav-bar	.instui-side-nav-bar	Een verticale navigatierail met pictogram-boven-label items, met een geminimaliseerde alleen-pictogrammen modus.
side-nav-bar.item	.item	Een navigatie-item (InstUI SideNavBar.Item); -selected markeert degene die actief is.
simple-select	.instui-simple-select	Een gestileerde native <select> met een caret, passend bij de tekstinvoertoestanden en -groottes.
spinner	.instui-spinner	Een geanimeerde laadring; geef het role="status" en een aria-label.
table	.instui-table	Een gestileerde datatabel voor th en td plus een optionele bijschrift, met hover-, vaste- en gestapelde-kaart lay-outs.
table.body	tbody	De gegevensrijgroep van de tabel (InstUI Table.Body).
table.cell	td	Een gegevenscel (InstUI Table.Cell).
table.col-header	th	Een kolom-kopcel (InstUI Table.ColHeader); de standaard th-opmaak, overschreven door table.row-header voor th[scope="row"].
table.head	thead	De koprijgroep van de tabel (InstUI Table.Head).
table.row	tr	Een tabelrij (InstUI Table.Row).
table.row-header	th[scope="row"]	Een rij-kopcel (InstUI Table.RowHeader); opgemaakt vanuit de rij-koptokens, niet die van de kolom-kop.
tabs	.instui-tabs	Een set met tabpanelen: een tablijst, selecteerbare tabs en hun panelen.
tabs.panel	.panel	Het inhoudspanel voor een tab (InstUI Tabs.Panel).
tabs.tab	.tab	Een enkele tabknop (InstUI Tabs.Tab, geconfigureerd via de ouderlijke Tabs's tablijst); -selected markeert degene die actief is.
tag	.instui-tag	Een inline chip voor een trefwoord of filter.
text	.instui-text	Body-teksttypografie met grootte-, gewicht-, kleur- en stijlmodifiers.
text-area	.instui-text-area	Een gestileerde, aanpasbare native <textarea> met dezelfde toestanden en groottes als de tekstinvoer.
text-input	.instui-text-input	Een gestileerde native <input> — inclusief date, time en datetime-local, waarbij de browser de picker levert — met validatiestaten en groottes.
toggle-details	.instui-toggle-details	Een gestileerde native <details> disclosure met een roterende chevron.
toggle-group	.instui-toggle-group	Een omrande disclosure gebouwd op <details>: een samenvattingsrij met chevron en inklapbare inhoud.
tooltip	.instui-tooltip	Een CSS-hover- en focus-tooltipbubbel, plaatsbaar aan elke zijde.
tray	.instui-tray	Een randgeplakt paneel dat van elke zijde binnen schuift; een native [popover] of <dialog>.
tree-browser	.instui-tree-browser	Een disclosure-boom van geneste collecties en bladitems, met roterende chevrons.
view	.instui-view	De View-primitief: een neutrale doos met key-value modifiers voor achtergrond, rand, radius, schaduw, display, positie, overflow en cursor. Elk van deze modifiers is ook globaal beschikbaar (zonder of gekoppeld aan elk ander component) — zie de background/border/shadow/display/position/overflow/cursor utilities.

Hulpprogramma's

Naam	Klasse	Samenvatting
color	.--text-danger	Semantische kleurutilities: .--bg-<name>, .--text-<name> (gealiseerd als .--color-<name>) en .--border-<name> voor het samengestelde semantische palet. Elk van deze heeft ook een componentgekoppelde alias-modifier (bijvoorbeeld -bg-danger op elk .instui-<component>).
cursor	.--cursor-pointer	cursor als een samenstelbare, globale klasse — .--cursor-<value> — bruikbaar los of gekoppeld aan elk component (.instui-button.--cursor-pointer).
gap	.--gap-md	Flex/grid gap utilities op de spacing-schaal, korte (--gap-sm) of lange (--gap-small) spelling. Bruikbaar los of gekoppeld aan elk component (.instui-view.--gap-sm) — componenten die hun eigen gap al vanuit een component-specifieke token zetten, kunnen deze overschreven zien.
icon	.instui-icon	Het icon-systeem: .instui-icon sizing plus de gedeelde -icon-<name> painter die een glyph (in currentColor) maskeert vóór elk element.
layout	.--display-flex	Display- en tekstuitlijning-utilities — .--display-<value> en .--text-align-<value> — als samenstelbare, globale klassen, bruikbaar los of gekoppeld aan elk component.
maskglobal	.--mask-overlay	Een globale, dubbele kopie van de overlay-modifiers van de mask component — --mask-overlay, --mask-fullscreen, --mask-blur — bruikbaar los of gekoppeld aan elk component, zonder te wikkelen in een .instui-mask element.
overflow	.--overflow-x-hidden	overflow-x/overflow-y als samenstelbare, globale klassen — .--overflow-x-<value> / .--overflow-y-<value> — bruikbaar los of gekoppeld aan elk component.
position	.--position-relative	position als een samenstelbare, globale klasse — .--position-<value> — bruikbaar los of gekoppeld aan elk component (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Viewport- of container-breedte toon/verberg klassen over een gethematiseerde breakpoint-schaal.
screen-reader-content	.instui-screen-reader-content	Verbergt visueel inhoud terwijl het beschikbaar blijft voor ondersteunende technologieën (het standaard clip-patroon).
spacing	.--p-md	Margin- en padding-hulpprogramma's — .--m<side>-<step> / .--margin-<side>-<step> en .--p<side>-<step> / .--padding-<side>-<step> op de spatiëringsschaal (zijden t/b/s/e/x/y of geen, kort of volledig gespeld — bijvoorbeeld --mb-sm en --margin-bottom-small zijn dezelfde regel; margin accepteert ook auto). Bruikbaar los of gekoppeld aan elk component (bijvoorbeeld class="instui-view --mb-sm").
stacking	.--stack-topmost	z-index diepte-hulpprogramma's — .--stack-<level> (deepest, below, above, topmost) — bruikbaar los of gekoppeld aan elk component, zodat lagen voorspelbaar stapelen in plaats van met handmatig gekozen nummers.
transition	.instui-transition.-transition-fade-entering	Animatiestatus-klassen voor het Transition-component — .instui-transition en statusklassen (-transition-fade-entering, -transition-scale-exited, enz.) — bruikbaar los of gekoppeld aan elk component.
truncate	.--truncate	Ellipsis-afkapping met lijnbegrenzing geregeld door --lines — bruikbaar los of gekoppeld aan elk component (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Een outline voor lay-out debuggen: voeg samenstellende .-with-visual-debug toe aan elk element om de box en zijn directe kinderen te omlijnen, zodat de structuur van een lay-out in één oogopslag zichtbaar is.

Regels

Naam	Klasse	Samenvatting
base	*	De opt-in globale reset: box-sizing, het paginavlak, basistekstkleur en lettertype, color-scheme, en standaardinstellingen voor links.
prose	:where(body)	Typografische standaarden voor ruwe HTML — koppen, paragrafen, lijsten, links en code — automatisch toegepast waar het wordt geïmporteerd (standaard :where(body)); geef options.scope door om een andere content-root te targeten (bijv. .vp-doc).

Plugins

Naam	Klasse	Samenvatting
logos	.logos	Instructure-productlogo's als CSS-beeldtokens: --instui-logo-<product>-<layout>-<mode> bevat een data-URI SVG, dus een logo wordt weergegeven via bijv. background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Opt-in hulpprogrammaklassen voor het ruwe primitieve palet: .instui-bg-/fg-/border-primitive-color-<name> geven een kleur uit de primitieve kleurtokens weer, plus font-family/font-weight hulpprogramma's voor de primitieve font-tokens. Buiten de semantische hulpprogramma's gehouden zodat overschrijvingen daar semantisch blijven.
visual-debug	.-with-visual-debug	Een outline voor lay-out debuggen: voeg samenstellende .-with-visual-debug toe aan elk element om de box en zijn directe kinderen te omlijnen, zodat de structuur van een lay-out in één oogopslag zichtbaar is.

layout

Naam	Klasse	Samenvatting
callout	div[class~="instui-callout"]	Inline informatieve waarschuwing voor een korte herinnering of opmerking.
hero	div[class~="instui-hero"]	Volledige breedte kopsectie met titel, subtitel en optionele achtergrondafbeelding.
page-layout	div[class~="instui-page-layout"]	Standaard driekoloms paginalay-out met kop, zijbalk en hoofdinhoud.
rubric-note	div[class~="instui-rubric-note"]	Gestructureerde notitie met rubrieken en score-indicatoren.
testimonial	div[class~="instui-testimonial"]	Weergave van citaat of getuigenis met attributie en optionele afbeelding.
two-column	div[class~="instui-two-column"]	Tweekoloms lay-out met linker- en rechterinhoudsgebieden.
wrapper	body[class~="instui-display-flex"]	App-shell rij: zij-navigatie, container met kop en optioneel paneel.