CSS: wrapper

body[class~="instui-display-flex"] — App-shell-rad: sidonavigering, container med rubrik och valfri panel.

✅ Använd Wrapper när:

• Bygger en hel Canvas-produktssida som behöver ett konsekvent layoutskal

• Sidan använder GlobalNav som huvudnavigationsankare

• Sidan behöver sidopaneler: ContentTabList, TrailingContentArea eller en UtilityPanel

• Du behöver konsekvent container-padding och maxbredd för innehåll över hela sidan 🚫 Använd inte Wrapper när:

• Du bygger en Modal, Tray eller Drawer — dessa har egna layoutcontainrar

• Du slår in en delavsnitt av en sida — Wrapper innehåller hela sidan, inte en region

Tillgänglighet

• Mappa huvudinhållsområdet till ett <main>-landmärke med en skip-nav-länk så att tangentbordsanvändare kan hoppa förbi GlobalNav
• Ge ContentTabList role="navigation" med en tydlig aria-label som t.ex. "Page navigation" — separat från GlobalNavs landmärke
• Ge TrailingContentArea role="complementary" med en beskrivande aria-label som speglar dess innehåll, t.ex. "Student details"
• Ge varje UtilityPanel en tydlig aria-label: "AI assistant", "Notifications" eller "Filters"
• När en UtilityPanel öppnas, flytta fokus in i panelen; när den stängs, återställ fokus till triggern som öppnade den

Användning

@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;

Platser

Slot	Beskrivning
content	Primärt sidinnehåll.
filters	Valfritt filterinnehåll inuti rubriken.
header	Valfri header-slot under sidbeskrivningen.
panel	Innehåll för utility-panel.
trailing	Efterföljande kompletterande innehåll.

Delar

Del	Beskrivning
.actions	Valfria header-knappar i slutet av översta raden.
.container	Huvudkolumn på sidan som innehåller rubrik och innehåll.
.content	Primärt innehållsområde inuti containerkolumnen.
.description	Valfri sidbeskrivning under titeln.
.filters	Valfritt filterområde inuti rubriken.
.header	Rubrikområde inuti containerkolumnen.
.info	Container för sidtitel och valfri beskrivning.
.list	Valfri navigationskolumn inuti innehållet.
.main	Huvudinnehållskolumn inuti innehållet.
.panel	Utility-panelens område som öppnas på högra sidan av sidan.
.tabs	Valfria navigeringsflikar i början av innehållsraden.
.title	Sidtitel under översta raden.
.top	Gridrad som innehåller brödsmulor och verktyg.
.trailing	Valfri kompletterande kolumn inuti innehållet.
.utilities	Utility-åtgärder i slutet av översta raden.

Tillstånd

Tillstånd	Beskrivning
:optional	—

Förbrukade tokens

Token	Typ	Värde
--instui-background-color-page	—	—

Underkomponenter

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

Relaterat

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