CSS: wrapper

body[class~="instui-display-flex"] — App-shell-rij: zijnavigatie, container met kop en optioneel paneel.

✅ Gebruik Wrapper wanneer:

• Je een volledige Canvas-productpagina bouwt die een consistente layout-shell nodig heeft

• De pagina GlobalNav gebruikt als primaire navigatieanker

• De pagina zijpanelen nodig heeft: ContentTabList, TrailingContentArea of een UtilityPanel

• Je consistente container-padding en een maximale inhoudsbreedte over de volledige pagina nodig hebt 🚫 Gebruik Wrapper niet wanneer:

• Je een Modal, Tray of Drawer bouwt — die hebben hun eigen layout-containers

• Je een subsectie van een pagina wilt wrappen — Wrapper bevat de volledige pagina, niet slechts een regio

Toegankelijkheid

• Maak het hoofdinhoudsgebied een <main>-landmark met een skip-nav link zodat toetsenbordgebruikers GlobalNav kunnen overslaan
• Geef ContentTabList role="navigation" met een onderscheidend aria-label zoals "Page navigation" — los van GlobalNav's landmark
• Geef TrailingContentArea role="complementary" met een beschrijvend aria-label dat de inhoud weerspiegelt, zoals "Student details"
• Geef elk UtilityPanel een uniek aria-label: "AI assistant", "Notifications" of "Filters"
• Wanneer een UtilityPanel opent, verplaats de focus in het paneel; wanneer het sluit, zet de focus terug naar de trigger die het opende

Gebruik

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

Structuur

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	Beschrijving
content	Primaire paginainhoud.
filters	Optionele filterinhoud binnen de kop.
header	Optionele header-slot onder de paginabeschrijving.
panel	Inhoud van het utility-paneel.
trailing	Achterblijvende complementaire inhoud.

Onderdelen

Onderdeel	Beschrijving
.actions	Optionele headerknoppen aan het einde van de bovenste rij.
.container	Hoofdpaginekolf die kop en inhoud bevat.
.content	Primaire inhoudsgebied binnen de containerkolom.
.description	Optionele paginabeschrijving onder de titel.
.filters	Optioneel filtergebied binnen de kop.
.header	Kopgebied binnen de containerkolom.
.info	Container voor paginatitel en optionele beschrijving.
.list	Optionele navigatiekolom binnen de inhoud.
.main	Hoofdinhoudskolom binnen de inhoud.
.panel	Utility-paneelgebied dat aan de rechterkant van de pagina opent.
.tabs	Optionele navigatietabbladen aan het begin van de inhoudsrij.
.title	Paginatitel onder de bovenste rij.
.top	Grid-rij met breadcrumbs en utilities.
.trailing	Optionele complementaire kolom binnen de inhoud.
.utilities	Utility-acties aan het einde van de bovenste rij.

Staten

Toestand	Beschrijving
:optional	—

Gebruikte tokens

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

Subcomponenten

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

Gerelateerd

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