CSS API-referens

CSS‑API‑referensen täcker pantoken‑lageret för klassbaserade komponenter: komponenter, utilities, globala regler och deklarationer byggda på tokensystemet.

Komponenter

Namn	Klass	Sammanfattning
agent-shell	.instui-agent-shell	En yta för AI‑agenter.
alert	.instui-alert	Ett inline‑meddelande med en statusfärgsbar och en maskerad status‑ikon från den delade ikonuppsättningen.
avatar	.instui-avatar	En användaravatar som visar initialer eller en bild, cirkulär som standard.
badge	.instui-badge	En liten räknare eller statuspunkt placerad över ett mål i hörnet.
banner	.instui-banner	En avvisbar, ikonförsedd meddelandeyta för sidnivå‑ eller i‑sammanhang‑annonseringar.
billboard	.instui-billboard	Ett stort tomt‑tillstånd eller call‑to‑action‑block: en hero‑ikon eller bild, en rubrik och ett meddelande.
breadcrumb	.instui-breadcrumb	En brödsmule‑stig med separatorer; den sista smulan är den aktuella sidan.
breadcrumb.link	li	En smula (InstUI Breadcrumb.Link), en <li> i förälderns <ol>; den sista är den aktuella sidan.
button	.instui-button	En tillgänglig åtgärdskontroll, stylad från token‑paletten; primär som standard.
byline	.instui-byline	Ett mediaobjekt: en hero‑figur bredvid en titel och beskrivning.
calendar	.instui-calendar	Ett statiskt månadsgalleri med navigation, veckodagsrubriker och dagsceller.
calendar.day	.day	En dagscell (InstUI Calendar.Day); -today, -selected och -outside-month markerar dess tillstånd.
card	.instui-card	En yta som accepterar valfritt innehåll.
checkbox	.instui-checkbox	En native checkbox och dess etikett, eller en switch via -variant-toggle.
close-button	.instui-close-button	En transparent ikonknapp som ritar sitt eget ×‑tecken, i tre storlekar plus en variant för på‑färg.
context-view	.instui-context-view	En förhöjd callout med caret, positionerbar på vilken sida som helst; fungerar som en native [popover].
drawer-layout	.instui-drawer-layout	En delad layout med en kollapsbar sidolåda och en primär rullbar innehållspanel.
drawer-layout.content	.content	Den primära innehållspanelen som fyller återstående utrymme bredvid lådan.
drawer-layout.tray	.tray	Sidopanelen intill huvudinnhållet, med valfri overlay och tray‑liknande ytemodifierare.
file-drop	.instui-file-drop	En fil‑dropzone med hover-, accepterad‑ och avvisad‑tillstånd.
form-field	.instui-form-field	En form‑fältswrapper: en etikett, dess kontroller och inline-, required‑ eller readonly‑layouter.
form-field-group	.instui-form-field-group	En <fieldset>‑grupp med legend, kolumn‑ eller inline‑layout och konfigurerbart mellanrum.
form-field-messages	.instui-form-field-messages	Fälthjälp och valideringsmeddelanden — hint, fel, framgång och endast för skärmläsare — med en ikon vid fel och framgång.
heading	.instui-heading	Rubriktypografi från -level-h1 till -level-h6.
img	.instui-img	En stylad <img> med display‑, crop‑ och effektmodifierare som staplas.
in-place-edit	.instui-in-place-edit	En [contenteditable] som läses som text tills den får fokus, då visas inmatnings‑chrome.
input-group	.instui-input-group	En fasad runt ett textfält med platser för ledande och avslutande ikoner.
link	.instui-link	En stylad länk med storlekar, en invers variant för mörka bakgrunder och inline‑ eller ostylad form.
list	.instui-list	En lista med token‑styrt avstånd mellan poster.
list.item	.instui-list	Ett listobjekt (InstUI List.Item).
mask	.instui-mask	En in‑flow overlay som fyller sin positionerade förälder och centrerar sitt innehåll — t.ex. en spinner över ett kort. För en modal, föredra en native <dialog> (dess ::backdrop är masken). Varje en av dessa modifierare finns också globalt (bar, eller kedjad på vilken annan komponent som helst) — se mask global utility.
menu	.instui-menu	En dropdown‑yta med objekt, grupper och separatorer.
menu.group	.group	En märkt grupprubrik (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	En menypost (InstUI Menu.Item); lägg till -disabled, -highlighted eller -active/[aria-checked].
menu.separator	.separator	En avdelare mellan objekt (InstUI Menu.Separator).
metric	.instui-metric	En märkt statistik — ett stort värde över en bildtext.
modal	.instui-modal	En dialogyta (fungerar på en native <dialog>); delar för header/body/footer.
modal.body	.body	Innehållsregionen (InstUI Modal.Body); en ensam <img> blir full‑bleed.
modal.footer	.footer	Åtgärdsraden (InstUI Modal.Footer).
modal.header	.header	Titlraden (InstUI Modal.Header).
number-input	.instui-number-input	En nummerinmatningsfasad med en +/-‑spinnerkolumn.
pagination	.instui-pagination	Sidnavigering: numrerade sidor, första, föregående, nästa och sista pilar, och en ellips för luckor.
pagination.page	.page	En sidslänk eller knapp (InstUI Pagination.Page); aktuell sida bär [aria-current].
pill	.instui-pill	En kompakt statusetikett; lägg till en ledande ikon med den delade -icon-<name>‑formen.
popover	.instui-popover	En upphöjd yta för en native [popover], positionerad med CSS anchor‑positionering.
progress	.instui-progress	En determinerad progress‑bar med en färgad mätare, storlekar och en valfri värdetikett.
progress-circle	.instui-progress-circle	En cirkulär progressring styrd av --value och --value-max custom properties.
radio	.instui-radio	En native radioknapp och dess etikett.
radio-input-group	.instui-radio-input-group	En single‑select radio <fieldset>, enkel eller som en sammankopplad segmenterad växling.
range-input	.instui-range-input	En stylad range‑slider med en invers värde‑bubbla.
rating	.instui-rating	En stjärnklassning med fyllda och tomma symboler och en valfri numerisk etikett.
side-nav-bar	.instui-side-nav-bar	En vertikal navigeringslist med ikon-över-etikett-objekt, med ett minimerat endast-ikoner-läge.
side-nav-bar.item	.item	En navigeringspost (InstUI SideNavBar.Item); -selected markerar den aktiva.
simple-select	.instui-simple-select	En stylad native <select> med en caret, som matchar textinmatningsstaterna och -storlekarna.
spinner	.instui-spinner	En animerad laddningsring; ge den role="status" och en aria-label.
table	.instui-table	En stylad datatabell för th och td plus en valfri bildtext, med hover-, fixerat- och staplade-kort-layouts.
table.body	tbody	Tabellens dataradsgrupp (InstUI Table.Body).
table.cell	td	En datacell (InstUI Table.Cell).
table.col-header	th	En kolumnrubrikcell (InstUI Table.ColHeader); standardstylingen th åsidosätts av table.row-header för th[scope="row"].
table.head	thead	Tabellens huvudradsgrupp (InstUI Table.Head).
table.row	tr	En tabellrad (InstUI Table.Row).
table.row-header	th[scope="row"]	En radhuvudcell (InstUI Table.RowHeader); stylad från radhuvudstokenarna, inte kolumnhuvudens.
tabs	.instui-tabs	Ett flikuppsättningspanel: en fliklista, valbara flikar och deras paneler.
tabs.panel	.panel	Innehållspanelen för en flik (InstUI Tabs.Panel).
tabs.tab	.tab	En enskild flikknapp (InstUI Tabs.Tab, konfigurerad via förälderns Tabss fliklista); -selected markerar den aktiva.
tag	.instui-tag	En inline-chip för ett nyckelord eller en filtertagg.
text	.instui-text	Brödtexttypografi med storlek, vikt, färg och stilmodifierare.
text-area	.instui-text-area	En stylad, ändringsbar native <textarea> med samma stater och storlekar som textinmatningen.
text-input	.instui-text-input	En stylad native <input> — inklusive date, time och datetime-local, där webbläsaren levererar väljaren — med valideringsstater och storlekar.
toggle-details	.instui-toggle-details	En stylad native <details>-disclosure med en roterande chevron.
toggle-group	.instui-toggle-group	En kantad disclosure byggd på <details>: en sammanfattningsrad med chevron och kollapsbart innehåll.
tooltip	.instui-tooltip	En CSS-baserad tooltip-bubbla för hover och focus, positionerbar på vilken sida som helst.
tray	.instui-tray	En kantfäst panel som skjuter in från valfri sida; en native [popover] eller <dialog>.
tree-browser	.instui-tree-browser	Ett disclosure-träd av nästlade samlingar och lövobjekt, med roterande chevrons.
view	.instui-view	View-primitive: en neutral ruta med nyckel-värde-modifierare för bakgrund, kant, radie, skugga, display, position, overflow och markör. Varje av dessa modifierare finns också globalt (bar eller kedjad på vilken annan komponent som helst) — se background/border/shadow/display/position/overflow/cursor-verktygen.

Verktyg

Namn	Klass	Sammanfattning
color	.--text-danger	Semantiska färgverktyg: .--bg-<name>, .--text-<name> (alias som .--color-<name>) och .--border-<name> för den kuraterade semantiska paletten. Var och en av dessa har också en komponent-bifogad alias-modifierare (t.ex. -bg-danger på vilken .instui-<component> som helst).
cursor	.--cursor-pointer	cursor som en komponerbar, global klass — .--cursor-<value> — användbar bar eller kedjad på vilken komponent som helst (.instui-button.--cursor-pointer).
gap	.--gap-md	Flex/grid gap-verktyg på avståndsskalan, kort (--gap-sm) eller lång (--gap-small) stavning. Användbar bar eller kedjad på vilken komponent som helst (.instui-view.--gap-sm) — komponenter som redan sätter sin egen gap från en komponent-specifik token kan få den åsidosatt.
icon	.instui-icon	Ikonsystemet: .instui-icon-storlekar plus den delade -icon-<name>-målaren som maskerar en symbol (i currentColor) framför vilket element som helst.
layout	.--display-flex	Display- och text-justeringsverktyg — .--display-<value> och .--text-align-<value> — som komponerbara, globala klasser, användbara bar eller kedjade på vilken komponent som helst.
maskglobal	.--mask-overlay	En global, dubbel kopia av mask-komponentens overlay-modifierare — --mask-overlay, --mask-fullscreen, --mask-blur — användbara bar eller kedjade på vilken komponent som helst, utan omslag i ett .instui-mask-element.
overflow	.--overflow-x-hidden	overflow-x/overflow-y som komponerbara, globala klasser — .--overflow-x-<value> / .--overflow-y-<value> — användbara bar eller kedjade på vilken komponent som helst.
position	.--position-relative	position som en komponerbar, global klass — .--position-<value> — användbar bar eller kedjad på vilken komponent som helst (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Visa-/dölj-klasser baserade på viewport- eller container-bredd över en tematisk brytpunktsskala.
screen-reader-content	.instui-screen-reader-content	Gömmer visuellt innehåll samtidigt som det hålls tillgängligt för hjälpteknik (standardklippmönstret).
spacing	.--p-md	Marginal- och padding-verktyg — .--m<side>-<step> / .--margin-<side>-<step> och .--p<side>-<step> / .--padding-<side>-<step> på avståndsskalan (sidor t/b/s/e/x/y eller ingen, stavat kort eller fullständigt — till exempel --mb-sm och --margin-bottom-small är samma regel; margin accepterar också auto). Kan användas ensamma eller kedjas på vilken komponent som helst (t.ex. class="instui-view --mb-sm").
stacking	.--stack-topmost	z-index-djupverktyg — .--stack-<level> (deepest, below, above, topmost) — kan användas ensamma eller kedjas på vilken komponent som helst, så lager staplas förutsägbart istället för med handavstämda siffror.
transition	.instui-transition.-transition-fade-entering	Animationsstatusklasser för Transition-komponenten — .instui-transition och statusklasser (-transition-fade-entering, -transition-scale-exited, etc.) — kan användas ensamma eller kedjas på vilken komponent som helst.
truncate	.--truncate	Ellipsis-trunkering med linjeavklämning styrd av --lines — kan användas ensamt eller kedjas på vilken komponent som helst (.instui-button.--truncate).
visual-debug	.-with-visual-debug	En layout-debuggande kontur: kombinera .-with-visual-debug med vilket element som helst för att markera rutan och dess omedelbara barn, så layoutens struktur syns vid en överblick.

Regler

Namn	Klass	Sammanfattning
base	*	Den opt-in globala resetten: box-sizing, sidans yta, grundtextfärg och font, color-scheme, och länkstandarder.
prose	:where(body)	Typografiska standardinställningar för rå HTML — rubriker, stycken, listor, länkar och kod — tillämpas automatiskt där det importeras (standard :where(body)); skicka options.scope för att rikta in en annan innehållsrot istället (t.ex. .vp-doc).

Plugins

Namn	Klass	Sammanfattning
logos	.logos	Instructure-produktlogotyper som CSS-bildtokens: --instui-logo-<product>-<layout>-<mode> innehåller en data-URI SVG, så en logotyp målas t.ex. via background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Opt-in utilityklasser för den råa primitiva paletten: .instui-bg-/fg-/border-primitive-color-<name> målar en färg från de primitiva färgtokens, plus font-family/font-weight verktyg för de primitiva fonttoks. Hålls utanför de semantiska verktygen så att överskrifter där förblir endast semantiska.
visual-debug	.-with-visual-debug	En layout-debuggande kontur: kombinera .-with-visual-debug med vilket element som helst för att markera rutan och dess omedelbara barn, så layoutens struktur syns vid en överblick.

layout

Namn	Klass	Sammanfattning
callout	div[class~="instui-callout"]	Inline informationsvarning för en kort påminnelse eller notis.
hero	div[class~="instui-hero"]	Heltäckande header-sektion med titel, undertitel och valfri bakgrundsbild.
page-layout	div[class~="instui-page-layout"]	Standard tre-kolumns sidlayout med header, sidofält och huvudinnehåll.
rubric-note	div[class~="instui-rubric-note"]	Strukturerad anteckning med bedömningskategorier och poängindikatorer.
testimonial	div[class~="instui-testimonial"]	Citat- eller vittnesmålsvisning med attribution och valfri bild.
two-column	div[class~="instui-two-column"]	Två-kolumns layout med vänster och höger innehållsregioner.
wrapper	body[class~="instui-display-flex"]	App-shell-rad: sidonavigering, container med header och valfri panel.