CSS API-referanse

CSS API-referansen dekkjer pantoken sitt klassebaserte komponentlag: komponentar, hjelpeklasser, globale reglar og deklarasjonar bygd på tokensystemet.

Komponentar

Namn	Klasse	Samandrag
agent-shell	.instui-agent-shell	Ein flate for AI-agentar.
alert	.instui-alert	Ei inline-melding med ein statusfargebar og eit maskert statusikon frå det delte ikonetsettet.
avatar	.instui-avatar	Ein brukaravatar som viser initialar eller eit bilete, som er sirkulær som standard.
badge	.instui-badge	Ein lita telje- eller statusprikk plassert over eit hjørne av målet.
banner	.instui-banner	Ei avvikbar, ikonbelagd meldingflate for side-nivå eller kontekstsvarande kunngjeringar.
billboard	.instui-billboard	Ein stor tom-tilstand eller oppfordringsblokk: eit hovudikon eller bilete, ein overskrift og ein melding.
breadcrumb	.instui-breadcrumb	Ein brødsmulesti med skiljeteikn; den siste smulen er den aktuelle sida.
breadcrumb.link	li	Ein smule (InstUI Breadcrumb.Link), ein <li> i foreldra sin <ol>; den siste er den aktuelle sida.
button	.instui-button	Ein tilgjengeleg handlingskontroll, styla frå token-paletten; primær som standard.
byline	.instui-byline	Eit mediaobjekt: ei hovudfigur ved sidan av ein tittel og ei skildring.
calendar	.instui-calendar	Eit statisk månadsrutenett med navigasjon, vekedagsrubrikkar og dagceller.
calendar.day	.day	Ein dagcelle (InstUI Calendar.Day); -today, -selected og -outside-month markerer tilstanden hennar.
card	.instui-card	Ein flatebehaldar som tek imot godtykkeleg innhald.
checkbox	.instui-checkbox	Ei innfødd kryssrute og etiketten hennar, eller ein brytar via -variant-toggle.
close-button	.instui-close-button	Ein transparent ikonknapp som teiknar sitt eige ×-ikon, i tre storleikar pluss ein variant for på-farge.
context-view	.instui-context-view	Ein heva påminning med ein spiss, kan plasserast på alle sider; fungerer som eit innfødd [popover].
drawer-layout	.instui-drawer-layout	Eit delt oppsett med ein kollapsbar sidetray og eit primært rulleleg innhaldspanel.
drawer-layout.content	.content	Det primære innhaldspanelet som fyller attverande plass ved sida av trayen.
drawer-layout.tray	.tray	Sidepanelet ved sidan av hovudinnhaldet, med valfri overlegg og tray-liknande flatemodifikatorar.
file-drop	.instui-file-drop	Ein fil-drope-sone med hover-, akseptert- og avvist-tilstandar.
form-field	.instui-form-field	Ein skjema-feltinnpakning: ein etikett, kontrollane hennar, og inline-, påkravd- eller readonly-oppsett.
form-field-group	.instui-form-field-group	Ein <fieldset>-gruppe med ein legend, kolonne- eller inline-oppsett, og konfigurerbar mellomrom.
form-field-messages	.instui-form-field-messages	Felt-hjelp og valideringsmeldingar — hint, feil, suksess og skjermlesar-berre — med eit ikon ved feil og suksess.
heading	.instui-heading	Overskrifts-typografi frå -level-h1 til -level-h6.
img	.instui-img	Ein styla <img> med visnings-, beskjærings- og effektmodifikatorar som kan stableast.
in-place-edit	.instui-in-place-edit	Ein [contenteditable] som vert lese som tekst til fokus, og då viser inntastings-krom.
input-group	.instui-input-group	Ei fasade rundt eit tekstinput med leiar- og etterfølgjande ikonplassar.
link	.instui-link	Ein styla hyperlenke med storleikar, ein invers variant for mørke bakgrunnar, og inline- eller ustrauma former.
list	.instui-list	Ei liste med token-styrt elementmellomrom.
list.item	.instui-list	Eit listeelement (InstUI List.Item).
mask	.instui-mask	Eit i-flyt-overlegg som fyller den posisjonerte forelderen og sentrerer innhaldet — t.d. ein spinner over eit kort. For ein modal, føretrekk eit innfødd <dialog> (masken hennar er ::backdrop). Kvar av desse modifikatorane finst òg globalt (naken, eller kobla til ein annan komponent) — sjå den mask globale hjelpeklassen.
menu	.instui-menu	Ein nedtrekksflate med element, grupper og skiljarar.
menu.group	.group	Ein merka gruppeoverskrift (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Ein menypost (InstUI Menu.Item); legg til -disabled, -highlighted, eller -active/[aria-checked].
menu.separator	.separator	Ein skiljelinje mellom element (InstUI Menu.Separator).
metric	.instui-metric	Ei merka statistikk — ein stor verdi over ei bildetekst.
modal	.instui-modal	Ei dialogflate (fungerer på ein innfødd <dialog>); delar: hovud, kropp og fot.
modal.body	.body	Innhaldsområdet (InstUI Modal.Body); ein einsam <img> går full-bleed.
modal.footer	.footer	Handlingsraden (InstUI Modal.Footer).
modal.header	.header	Tittelraden (InstUI Modal.Header).
number-input	.instui-number-input	Ein tal-inntastingsfasade med ein +/- spinnerkolonne.
pagination	.instui-pagination	Sidenavigasjon: nummererte sider, først, førre, neste og siste piler, og ei ellips for gap.
pagination.page	.page	Ein sidesnarveg eller knapp (InstUI Pagination.Page); den aktuelle sida har [aria-current].
pill	.instui-pill	Ein kompakt statusetikett; legg til eit førekomande ikon med den delte -icon-<name>-forma.
popover	.instui-popover	Ei heva flate for ein innfødd [popover], plassert med CSS anchor-posisjonering.
progress	.instui-progress	Ein deterministisk framdriftslinje med ein farga meter, storleikar og valfri verditekst.
progress-circle	.instui-progress-circle	Ein sirkulær framdrift-ring driven av --value og --value-max eigenskapar.
radio	.instui-radio	Ein innfødd radioknapp og etiketten hennar.
radio-input-group	.instui-radio-input-group	Ein enkeltvals radio <fieldset>, enkel eller som ein kopla segmentert brytar.
range-input	.instui-range-input	Ein styla glidebrytar med ei invers verdiboble.
rating	.instui-rating	Ein stjernereiting med fylte og tomme ikonar og ei valfri numerisk etikett.
side-nav-bar	.instui-side-nav-bar	Ein vertikal navigasjonsrail med ikon-over-etikett-element, med eit minimerte ikon-berre modus.
side-nav-bar.item	.item	Ein navigasjonsoppføring (InstUI SideNavBar.Item); -selected markerer den aktive.
simple-select	.instui-simple-select	Ein stilsett, native <select> med ein caret, som matchar tekstinndata-tilstandar og storleikar.
spinner	.instui-spinner	Ein animert lastingsring; gi han role="status" og ein aria-label.
table	.instui-table	Ein stilsett datatabell for th og td pluss ein valfri bildetekst, med hover-, fiksert- og stablet-kort-oppsett.
table.body	tbody	Tabellen sin dataradsgruppe (InstUI Table.Body).
table.cell	td	Ein datacelle (InstUI Table.Cell).
table.col-header	th	Ein kolonneoverskriftscelle (InstUI Table.ColHeader); standard th-stil, overstyrt av table.row-header for th[scope="row"].
table.head	thead	Tabellen sin header-radsgruppe (InstUI Table.Head).
table.row	tr	Ein tabellrad (InstUI Table.Row).
table.row-header	th[scope="row"]	Ein rad-overskriftscelle (InstUI Table.RowHeader); stilsett frå rad-overskrifts-tokene, ikkje frå kolonne-overskrifts-tokene.
tabs	.instui-tabs	Eit fane-panelsett: ei faneliste, valbare faner, og deira panel.
tabs.panel	.panel	Innhaldspanelet for ei fane (InstUI Tabs.Panel).
tabs.tab	.tab	Ein enkelt fane-knapp (InstUI Tabs.Tab, konfigurert via foreldre-Tabs sin faneliste); -selected markerer den aktive.
tag	.instui-tag	Ein inline-chips for eit nøkkelord eller filter.
text	.instui-text	Kroppstekst-typografi med storleik, vekt, farge og stilmodifikatorar.
text-area	.instui-text-area	Ein stilsett, størbar native <textarea> med same tilstandar og storleikar som tekstinndata.
text-input	.instui-text-input	Ein stilsett native <input> — inkludert date, time og datetime-local, der nettlesaren leverer veljaren — med valideringstilstandar og storleikar.
toggle-details	.instui-toggle-details	Ein stilsett native <details> avsløring med roterande chevron.
toggle-group	.instui-toggle-group	Ein rammebygd avsløring basert på <details>: ei sammendragsrad med chevron og kollapsbart innhald.
tooltip	.instui-tooltip	Ein CSS-hover- og fokustooltip-boble, plasserbar på kva som helst side.
tray	.instui-tray	Eit kant-pynta panel som sklir inn frå kva som helst side; ei native [popover] eller <dialog>.
tree-browser	.instui-tree-browser	Ein avslørings-trestruktur av nestla samlingar og blad-element, med roterande chevron.
view	.instui-view	View-primitivet: ein nøytral boks med nøkkel-verdi-modifikatorar for bakgrunn, ramme, radius, skugge, display, posisjon, overflow og markør. Kvar av desse modifikatorane finst òg globalt (øyde, eller kjeda på kva for eit anna komponent) — sjå background/border/shadow/display/position/overflow/cursor verktøya.

Hjelpemiddel

Namn	Klasse	Samandrag
color	.--text-danger	Semantiske fargeverktøy: .--bg-<name>, .--text-<name> (aliasert som .--color-<name>), og .--border-<name> for det kuraterte semantiske palettet. Kvar av desse har òg ein komponent-tilknytt alias-modifikator (til dømes -bg-danger på kva som helst .instui-<component>).
cursor	.--cursor-pointer	cursor som ei komponérbar, global klasse — .--cursor-<value> — brukbar åleine eller kjeda på kva for eit komponent (.instui-button.--cursor-pointer).
gap	.--gap-md	Flex/grid gap-verktøy på spacing-skalaen, kort (--gap-sm) eller lang (--gap-small) staving. Brukbar åleine eller kjeda på kva for eit komponent (.instui-view.--gap-sm) — komponentar som allereie set sin eigen gap frå ein komponent-spesifikk token kan få den overstyrt.
icon	.instui-icon	Ikonsystemet: .instui-icon storleikar pluss den delte -icon-<name> malaren som maskerar ein glyph (i currentColor) før noko element.
layout	.--display-flex	Display- og tekst-justeringsverktøy — .--display-<value> og .--text-align-<value> — som komponérbare, globale klassar, brukbare åleine eller kjeda på kva for eit komponent.
maskglobal	.--mask-overlay	Ei global, dobbel kopi av mask-komponenten sine overlay-modifikatorar — --mask-overlay, --mask-fullscreen, --mask-blur — brukbare åleine eller kjeda på kva for eit komponent, utan å pakke dei i eit .instui-mask-element.
overflow	.--overflow-x-hidden	overflow-x/overflow-y som komponérbare, globale klassar — .--overflow-x-<value> / .--overflow-y-<value> — brukbare åleine eller kjeda på kva for eit komponent.
position	.--position-relative	position som ei komponérbar, global klasse — .--position-<value> — brukbar åleine eller kjeda på kva for eit komponent (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Viewport- eller container-breide vis/skjul-klassar over ei tematisert brotpunkt-skala.
screen-reader-content	.instui-screen-reader-content	Visuelt skjuler innhald medan det held fram med å vere tilgjengeleg for hjelpemiddelteknologi (standard clip-mønsteret).
spacing	.--p-md	Margin- og padding‑verktøy — .--m<side>-<step> / .--margin-<side>-<step> og .--p<side>-<step> / .--padding-<side>-<step> på avstandsskalaen (sider t/b/s/e/x/y eller ingen, skrivekort eller fullt — til dømes er --mb-sm og --margin-bottom-small same regel; margin tek òg auto). Kan brukast åleine eller kjedjast på ein kvar komponent (til dømes class="instui-view --mb-sm").
stacking	.--stack-topmost	z-index‑djupne‑verktøy — .--stack-<level> (deepest, below, above, topmost) — kan brukast åleine eller kjedjast på ein kvar komponent, så lag stablar seg forutsigbart i staden for handjusterte tal.
transition	.instui-transition.-transition-fade-entering	Animajons‑tilstandsklassar for Transition‑komponenten — .instui-transition og tilstandsklassar (-transition-fade-entering, -transition-scale-exited, osb.) — kan brukast åleine eller kjedjast på ein kvar komponent.
truncate	.--truncate	Ellipsis‑avkorting med linjeklemming styrt av --lines — kan brukast åleine eller kjedjast på ein kvar komponent (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Eit layout‑debuggande omriss: samansette .-with-visual-debug på ein kvar element for å synleggjera boksen og dei næraste barna, slik at layout‑strukturen er synleg med eitt blikk.

Reglar

Namn	Klasse	Samandrag
base	*	Det valfrie globale resetet: box-sizing, sideflata, grunntekstfarge og font, color-scheme, og standardar for lenker.
prose	:where(body)	Typografiske standardar for rå HTML — overskrifter, avsnitt, lister, lenker og kode — vert brukt automatisk der det blir importert (standard :where(body)); gi options.scope for å sikte mot ein annan innhaldsrot i staden (t.d. .vp-doc).

Plugins

Namn	Klasse	Samandrag
logos	.logos	Instructure‑produktlogoar som CSS‑biletoken: --instui-logo-<product>-<layout>-<mode> inneheld ein data‑URI SVG, så ein logo kan rendrast via til dømes background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Valfrie hjelpeklassar for den rå primitive paletten: .instui-bg-/fg-/border-primitive-color-<name> set ein farge frå dei primitive farge‑tokena, pluss font-family/font-weight‑verktøy for dei primitive font‑tokena. Haldt utanfor dei semantiske verktøya slik at overstyringar der held seg semantiske‑einaste.
visual-debug	.-with-visual-debug	Eit layout‑debuggande omriss: samansette .-with-visual-debug på ein kvar element for å synleggjera boksen og dei næraste barna, slik at layout‑strukturen er synleg med eitt blikk.

layout

Namn	Klasse	Samandrag
callout	div[class~="instui-callout"]	Inline informasjonsvarsel for ei kort påminning eller merknad.
hero	div[class~="instui-hero"]	Heile breidda overskriftsseksjon med tittel, undertittel og valfri bakgrunnsbilete.
page-layout	div[class~="instui-page-layout"]	Standard tredelt sideoppsett med header, sidemeny og hovudinnhald.
rubric-note	div[class~="instui-rubric-note"]	Strukturert merknad med rubrikkategoriar og poengindikatorar.
testimonial	div[class~="instui-testimonial"]	Sitat- eller kundereferanse‑vising med attribusjon og valfritt bilete.
two-column	div[class~="instui-two-column"]	To‑kolonne oppsett med venstre og høgre innhaldsområde.
wrapper	body[class~="instui-display-flex"]	App‑shell rad: sidemeny, container med header, og valfri panel.