CSS: wrapper

body[class~="instui-display-flex"] — App-shell-rad: side-navigasjon, beholder med overskrift og valgfritt panel.

✅ Bruk Wrapper når:

• Bygger en full Canvas-produkt-side som trenger et konsekvent layout-shell

• Siden bruker GlobalNav som primær navigasjonsanker

• Siden trenger sidepaneler: ContentTabList, TrailingContentArea eller en UtilityPanel

• Du trenger konsekvent beholderpadding og maksimal innholdsbredde på hele siden 🚫 Ikke bruk Wrapper når:

• Bygger en Modal, Tray eller Drawer — disse har sine egne layout-beholdere

• Pakker inn en undersseksjon av en side — Wrapper inneholder hele siden, ikke et område

Tilgjengelighet

• Kartlegg hovedinnholdsområdet til et <main>-landemerke med en skip-nav-lenke slik at tastaturbrukere kan hoppe over GlobalNav
• Gi ContentTabList role="navigation" med en tydelig aria-label som "Page navigation" — atskilt fra GlobalNavs landemerke
• Gi TrailingContentArea role="complementary" med en beskrivende aria-label som reflekterer innholdet, for eksempel "Studentdetaljer"
• Gi hver UtilityPanel en tydelig aria-label: "AI assistant", "Notifications" eller "Filters"
• Når en UtilityPanel åpnes, flytt fokus inn i panelet; når den lukkes, returner fokus til triggeren som åpnet den

Bruk

@import "@pantoken/plugin-layouts/layouts.css";

Struktur

body[class~="instui-display-flex"]
  side-nav-bar (component)
  .container
    modal.header (component)
      .top
        breadcrumb (component)
        .utilities (0..1)
          button + button (component, 1..n)
      .info
        .title
        .description (0..1)
      ‹content: header› (0..1)
      .actions (0..1)
        button + button (component, 1..n)
      tabs (component, 0..1)
        tabs (component)
      .filters (0..1)
        ‹content: filters›
    drawer-layout.content (component)
      list + card (component, 0..1)
      slot[name="content"].main
      slot[name="trailing"].trailing + card (component, 0..1)
  tabs.panel (component)
    card | agent-shell (component, 0..1)

flowchart TD n0["body[class~=&quot;instui-display-flex&quot;]"]:::cssdoc-root n1(["side-nav-bar"]):::cssdoc-component n2(".container"):::cssdoc-part n3(["modal.header"]):::cssdoc-component n4(".top"):::cssdoc-part n5(["breadcrumb"]):::cssdoc-component n6(".utilities"):::cssdoc-part n7(["button + button"]):::cssdoc-component n8(".info"):::cssdoc-part n9(".title"):::cssdoc-part n10(".description"):::cssdoc-part n11[/"‹content: header›"/]:::cssdoc-slot n12(".actions"):::cssdoc-part n13(["button + button"]):::cssdoc-component n14(["tabs"]):::cssdoc-component n15(["tabs"]):::cssdoc-component n16(".filters"):::cssdoc-part n17[/"‹content: filters›"/]:::cssdoc-slot n18(["drawer-layout.content"]):::cssdoc-component n19([".list + card"]):::cssdoc-component n20("slot[name=&quot;content&quot;].main"):::cssdoc-part n21(["slot[name=&quot;trailing&quot;].trailing + card"]):::cssdoc-component n22(["tabs.panel"]):::cssdoc-component n23(["card | agent-shell"]):::cssdoc-component n0 --> n1 n4 --> n5 n6 -->|1..n| n7 n4 -.->|0..1| n6 n3 --> n4 n8 --> n9 n8 -.->|0..1| n10 n3 --> n8 n3 -.->|0..1| n11 n12 -->|1..n| n13 n3 -.->|0..1| n12 n14 --> n15 n3 -.->|0..1| n14 n16 --> n17 n3 -.->|0..1| n16 n2 --> n3 n18 -.->|0..1| n19 n18 --> n20 n18 -.->|0..1| n21 n2 --> n18 n0 --> n2 n22 -.->|0..1| n23 n0 --> n22 click n1 "/api/css/side-nav-bar.md" click n3 "/api/css/modal.header.md" click n5 "/api/css/breadcrumb.md" click n7 "/api/css/button.md" click n13 "/api/css/button.md" click n14 "/api/css/tabs.md" click n15 "/api/css/tabs.md" click n18 "/api/css/drawer-layout.content.md" click n19 "/api/css/card.md" click n21 "/api/css/card.md" click n22 "/api/css/tabs.panel.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Slots

Slot	Beskrivelse
content	Primært sideinnhold.
filters	Valgfritt filtreringsinnhold inne i overskriften.
header	Valgfritt overskrifts-slot under sidebeskrivelsen.
panel	Innhold for verktøypanel.
trailing	Etterfølgende komplementært innhold.

Deler

Del	Beskrivelse
.actions	Valgfrie overskriftsknapper i slutten av topprekken.
.container	Hovedsidens kolonne som holder overskrift og innhold.
.content	Primært innholdsområde inne i beholderkolonnen.
.description	Valgfri sidebeskrivelse under tittelen.
.filters	Valgfritt filtreringsområde inne i overskriften.
.header	Overskriftsområde inne i beholderkolonnen.
.info	Beholder for sidetittel og valgfri beskrivelse.
.list	Valgfri navigasjonskolonne inne i innholdet.
.main	Hovedinnholdskolonne inne i innholdet.
.panel	Utility-panelområde som åpnes på høyre side av siden.
.tabs	Valgfrie navigasjonsfaner i starten av innholdsrekken.
.title	Sidetittel under topprekken.
.top	Grid-rad som inneholder brødsmuler og verktøy.
.trailing	Valgfri komplementær kolonne inne i innholdet.
.utilities	Verktøyhandlinger i slutten av topprekken.

Tilstander

Tilstand	Beskrivelse
:optional	—

Forbrukte tokens

Token	Type	Verdi
--instui-background-color-page	—	—

Underkomponenter

• agent-shell
• breadcrumb
• button
• card
• drawer-layout.content
• list
• modal.header
• side-nav-bar
• tabs
• tabs.panel

Relatert

• card
• agent-shell
• breadcrumb
• tabs
• button
• heading