CSS API-reference

CSS API-referencen dækker pantokens klassebaserede komponentlag: komponenter, utilities, globale regler og deklarationer bygget på tokensystemet.

Komponenter

Navn	Klasse	Resumé
agent-shell	.instui-agent-shell	En overfladecontainer til AI-agenter.
alert	.instui-alert	En inline-besked med en statusfarvebjælke og et maskeret statusikon fra det delte ikon-sæt.
avatar	.instui-avatar	En brugeravatar, der viser initialer eller et billede, cirkulær som standard.
badge	.instui-badge	En lille tæller- eller statusprik placeret over et objekts hjørne.
banner	.instui-banner	En afviselig, ikonbesat beskedflade til side- eller kontekstmeddelelser.
billboard	.instui-billboard	En stor tom-tilstand eller call-to-action-blok: et stort ikon eller billede, en overskrift og en besked.
breadcrumb	.instui-breadcrumb	En brødkrummesti med separatorer; den sidste krumme er den aktuelle side.
breadcrumb.link	li	En krumme (InstUI Breadcrumb.Link), en <li> i forælderens <ol>; den sidste er den aktuelle side.
button	.instui-button	En tilgængelig handlingskontrol, stylet fra token-paletten; primær som standard.
byline	.instui-byline	Et medieobjekt: en hovedfigur ved siden af en titel og beskrivelse.
calendar	.instui-calendar	Et statisk månedsnet med navigation, ugedagsoverskrifter og dagsceller.
calendar.day	.day	En dagscelle (InstUI Calendar.Day); -today, -selected og -outside-month markerer dens tilstand.
card	.instui-card	En overfladecontainer, der accepterer vilkårligt indhold.
checkbox	.instui-checkbox	En native afkrydsningsboks og dens label, eller en switch via -variant-toggle.
close-button	.instui-close-button	En transparent ikonknap, der tegner sit eget ×-ikon, i tre størrelser plus en on-farvevariant.
context-view	.instui-context-view	En hævet callout med caret, placerbar på enhver side; fungerer som en native [popover].
drawer-layout	.instui-drawer-layout	Et delt layout med en kollapsbar sidebakke og en primær rullebar indholdsflade.
drawer-layout.content	.content	Den primære indholdsflade, der udfylder den resterende plads ved siden af bakken.
drawer-layout.tray	.tray	Sidepanelet ved siden af hovedindholdet, med valgfrit overlay og tray-lignende overflademodifikatorer.
file-drop	.instui-file-drop	En fil-dropzone med hover-, accepteret- og afvist-tilstande.
form-field	.instui-form-field	En formular-felt-wrapper: en label, dens controls og inline-, required- eller readonly-layouts.
form-field-group	.instui-form-field-group	En <fieldset>-gruppe med en legend, kolonne- eller inline-layout og konfigurerbar afstand.
form-field-messages	.instui-form-field-messages	Felt-hjælp og valideringsbeskeder — hint, fejl, succes og kun-skærmlæser — med et ikon ved fejl og succes.
heading	.instui-heading	Overskriftstypografi fra -level-h1 til -level-h6.
img	.instui-img	En stylet <img> med display-, crop- og effektmodifikatorer, der stables.
in-place-edit	.instui-in-place-edit	Et [contenteditable], der læses som tekst indtil fokus, hvorefter det viser input-UI.
input-group	.instui-input-group	En facade omkring et tekstinput med slots til førende og efterfølgende ikoner.
link	.instui-link	Et stylet hyperlink med størrelser, en invers variant til mørke baggrunde og inline- eller ustylet form.
list	.instui-list	En liste med token-styret itemafstand.
list.item	.instui-list	Et listeelement (InstUI List.Item).
mask	.instui-mask	En inline-overlay, der fylder sin positionerede forælder og centrerer sit indhold — f.eks. en spinner over et kort. Til en modal foretrækkes en native <dialog> (dens ::backdrop er masken). Hver af disse modifikatorer findes også globalt (nøgen, eller kædet på enhver anden komponent) — se den mask globale utility.
menu	.instui-menu	En dropdown-overflade med items, grupper og separatorer.
menu.group	.group	En mærket gruppeoverskrift (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Et menupunkt (InstUI Menu.Item); tilføj -disabled, -highlighted eller -active/[aria-checked].
menu.separator	.separator	En opdelingsregel mellem items (InstUI Menu.Separator).
metric	.instui-metric	En mærket statistik — en stor værdi over en billedtekst.
modal	.instui-modal	En dialogoverflade (virker på en native <dialog>); header/body/footer-deltelementer.
modal.body	.body	Indholdsregionen (InstUI Modal.Body); en enkelt <img> går fuld-bleed.
modal.footer	.footer	Actions-rækken (InstUI Modal.Footer).
modal.header	.header	Titelrækken (InstUI Modal.Header).
number-input	.instui-number-input	En number-input-facade med en +/- spinnerkolonne.
pagination	.instui-pagination	Sideskiftnavigation: nummererede sider, først, foregående, næste og sidste pile samt en ellipse for mellemrum.
pagination.page	.page	Et sidelink eller -knap (InstUI Pagination.Page); den aktuelle side bærer [aria-current].
pill	.instui-pill	En kompakt statusetiket; tilføj et ledende ikon med den delte -icon-<name> form.
popover	.instui-popover	En hævet overflade for en native [popover], positioneret med CSS anchor-positionering.
progress	.instui-progress	En determineret progressbar med en farvet meter, størrelser og en valgfri værdietiket.
progress-circle	.instui-progress-circle	En cirkulær progress-ring drevet af --value og --value-max custom properties.
radio	.instui-radio	En native radioknap og dens label.
radio-input-group	.instui-radio-input-group	Et single-select radio <fieldset>, enten almindelig eller som en forbundet segmenteret toggle.
range-input	.instui-range-input	En stylet range-slider med en invers værdieboble.
rating	.instui-rating	En stjernebedømmelse med fyldte og tomme glyffer og en valgfri numerisk etiket.
side-nav-bar	.instui-side-nav-bar	En lodret navigationsskinne med ikon-over-etiket-elementer og en minimeret kun-ikoner-tilstand.
side-nav-bar.item	.item	En navigationselement (InstUI SideNavBar.Item); -selected markerer det aktive.
simple-select	.instui-simple-select	En styllet native <select> med caret, der matcher tekstinput-stater og -størrelser.
spinner	.instui-spinner	En animeret indlæsningsring; giv den role="status" og en aria-label.
table	.instui-table	En styllet datatabel til th og td plus en valgfri billedtekst, med hover-, fast- og stablet-kort-layouts.
table.body	tbody	Tabelens datarækkegruppe (InstUI Table.Body).
table.cell	td	En datacelle (InstUI Table.Cell).
table.col-header	th	En kolonneoverskriftscelle (InstUI Table.ColHeader); standard th-styling, overskrevet af table.row-header for th[scope="row"].
table.head	thead	Tabelens header-rækkegruppe (InstUI Table.Head).
table.row	tr	En tabelrække (InstUI Table.Row).
table.row-header	th[scope="row"]	En rækkeoverskriftscelle (InstUI Table.RowHeader); stylet ud fra rækkeoverskrifts-tokens, ikke kolonneoverskrifts-tokens.
tabs	.instui-tabs	Et fanebaseret panel-sæt: en faneliste, udvælgbare faner og deres paneler.
tabs.panel	.panel	Indholdspanelet for en fane (InstUI Tabs.Panel).
tabs.tab	.tab	En enkelt faneknap (InstUI Tabs.Tab, konfigureret via forælderens Tabs's faneliste); -selected markerer den aktive.
tag	.instui-tag	En inline-chip til et nøgleord eller filter.
text	.instui-text	Brødtekst-typografi med størrelse, vægt, farve og stil-modifikatorer.
text-area	.instui-text-area	En styllet, ændringsbar native <textarea> med samme stater og størrelser som tekstinput.
text-input	.instui-text-input	En styllet native <input> — inklusive date, time og datetime-local, hvor browseren leverer pickeren — med valideringsstater og størrelser.
toggle-details	.instui-toggle-details	En styllet native <details> disclosure med en roterende chevron.
toggle-group	.instui-toggle-group	En kantet disclosure bygget på <details>: en opsummeringsrække med chevron og kollapsbart indhold.
tooltip	.instui-tooltip	En CSS hover- og fokus-tooltip-boble, positionerbar på enhver side.
tray	.instui-tray	Et kant-pinned panel, der glider ind fra enhver side; en native [popover] eller <dialog>.
tree-browser	.instui-tree-browser	Et disclosure-træ af indlejrede samlinger og blad-elementer, med roterende chevrons.
view	.instui-view	View-primitivet: en neutral boks med nøgle–værdi-modifikatorer for baggrund, kant, radius, skygge, display, position, overflow og cursor. Hver af disse modifikatorer er også tilgængelig globalt (bar eller kædet på enhver anden komponent) — se background/border/shadow/display/position/overflow/cursor utilities.

Hjælpefunktioner

Navn	Klasse	Resumé
color	.--text-danger	Semantiske farve-utilities: .--bg-<name>, .--text-<name> (alias som .--color-<name>) og .--border-<name> for den kuraterede semantiske palet. Hver af disse har også en komponent-tilknyttet alias-modifikator (for eksempel -bg-danger på enhver .instui-<component>).
cursor	.--cursor-pointer	cursor som en komponerbar, global klasse — .--cursor-<value> — brugbar bar eller kædet på enhver komponent (.instui-button.--cursor-pointer).
gap	.--gap-md	Flex/grid gap-utilities på spacingskalaen, kort (--gap-sm) eller lang (--gap-small) stavemåde. Brugbar bar eller kædet på enhver komponent (.instui-view.--gap-sm) — komponenter, der allerede sætter deres egen gap fra et komponent-specifikt token, kan få den overskrevet.
icon	.instui-icon	Ikonsystemet: .instui-icon-størrelser plus den delte -icon-<name>-painter, der masker en glyf (i currentColor) før ethvert element.
layout	.--display-flex	Display- og tekst-justerings-utilities — .--display-<value> og .--text-align-<value> — som komponerbare, globale klasser, brugbare bare eller kædet på enhver komponent.
maskglobal	.--mask-overlay	En global, dobbelt kopi af mask-komponentens overlay-modifikatorer — --mask-overlay, --mask-fullscreen, --mask-blur — brugbar bar eller kædet på enhver komponent, uden at indpakke i et .instui-mask-element.
overflow	.--overflow-x-hidden	overflow-x/overflow-y som komponerbare, globale klasser — .--overflow-x-<value> / .--overflow-y-<value> — brugbare bare eller kædet på enhver komponent.
position	.--position-relative	position som en komponerbar, global klasse — .--position-<value> — brugbar bar eller kædet på enhver komponent (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Visningsport- eller container-bredde vis/skjul-klasser på tværs af et tema-baseret breakpoint-skala.
screen-reader-content	.instui-screen-reader-content	Skjuler visuelt indhold, mens det forbliver tilgængeligt for assistiv teknologi (standard clip-mønster).
spacing	.--p-md	Margin- og padding-utilities — .--m<side>-<step> / .--margin-<side>-<step> og .--p<side>-<step> / .--padding-<side>-<step> på spacing-skalaen (sider t/b/s/e/x/y eller ingen, skrevet kort eller fuldt — for eksempel er --mb-sm og --margin-bottom-small den samme regel; margin accepterer også auto). Kan bruges alene eller kædes på et hvilket som helst komponent (for eksempel class="instui-view --mb-sm").
stacking	.--stack-topmost	z-index-dybde-utilities — .--stack-<level> (deepest, below, above, topmost) — kan bruges alene eller kædes på ethvert komponent, så lag stables forudsigeligt i stedet for med håndjusterede tal.
transition	.instui-transition.-transition-fade-entering	Animations-tilstandsklasser for Transition-komponenten — .instui-transition og tilstandsklasser (-transition-fade-entering, -transition-scale-exited, osv.) — kan bruges alene eller kædes på et hvilket som helst komponent.
truncate	.--truncate	Ellipsis-trunkering med linjeklapstyret kontrol via --lines — kan bruges alene eller kædes på ethvert komponent (.instui-button.--truncate).
visual-debug	.-with-visual-debug	En layout-fejlsøgnings-outline: sammensæt .-with-visual-debug på ethvert element for at fremhæve boksen og dens umiddelbare børn, så layoutets struktur er synlig med et øjekast.

Regler

Navn	Klasse	Resumé
base	*	Den valgfrie globale reset: box-sizing, sidens overflade, grundlæggende tekstfarve og font, color-scheme og link-standarder.
prose	:where(body)	Typografiske standarder for rå HTML — overskrifter, afsnit, lister, links og kode — anvendes automatisk hvorend det importeres (standard :where(body)); angiv options.scope for at rette mod en anden indholdsrødder (f.eks. .vp-doc).

Plugins

Navn	Klasse	Resumé
logos	.logos	Instructure-produktlogoer som CSS-billedtokens: --instui-logo-<product>-<layout>-<mode> indeholder en data-URI SVG, så et logo kan males via f.eks. background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Valgfrie utility-klasser for det rå primitive palet: .instui-bg-/fg-/border-primitive-color-<name> maler en farve fra de primitive farvetokens, plus font-family/font-weight utilities for de primitive font-tokens. Holdes ude af de semantiske utilities, så overrides der forbliver udelukkende semantiske.
visual-debug	.-with-visual-debug	En layout-fejlsøgnings-outline: sammensæt .-with-visual-debug på ethvert element for at fremhæve boksen og dens umiddelbare børn, så layoutets struktur er synlig med et øjekast.

layout

Navn	Klasse	Resumé
callout	div[class~="instui-callout"]	Inline informationsadvarsel til en kort påmindelse eller note.
hero	div[class~="instui-hero"]	Fuldbredde header-sektion med titel, undertitel og valgfrit baggrundsbillede.
page-layout	div[class~="instui-page-layout"]	Standard tre-kolonne sideopbygning med header, sidebar og hovedindhold.
rubric-note	div[class~="instui-rubric-note"]	Struktureret note med rubrik-kategorier og scoringsindikatorer.
testimonial	div[class~="instui-testimonial"]	Citat- eller testimonialvisning med attribution og valgfrit billede.
two-column	div[class~="instui-two-column"]	To-kolonne layout med venstre og højre indholdsregioner.
wrapper	body[class~="instui-display-flex"]	App-shell række: sidemenu, container med header og valgfrit panel.