CSS: wrapper

body[class~="instui-display-flex"] — Fila de l'aplicació: navegació lateral, contenidor amb capçalera i panell opcional.

✅ Utilitza Wrapper quan:

• Estàs construint una pàgina de producte completa de Canvas que necessita una capsa de disseny coherent

• La pàgina utilitza GlobalNav com a ancoratge de navegació principal

• La pàgina necessita panells laterals: ContentTabList, TrailingContentArea o un UtilityPanel

• Necessites un farcit de contenidor consistent i una amplada màxima de contingut coherent a tota la pàgina 🚫 No utilitzis Wrapper quan:

• Estàs construint un Modal, Tray o Drawer — aquests tenen els seus propis contenidors de disseny

• Estàs envoltant una subsecció d'una pàgina — Wrapper conté la pàgina completa, no una regió

Accessibilitat

• Mapeja l'àrea de contingut principal a un punt de referència <main> amb un enllaç de saltar-navegació perquè els usuaris de teclat puguin evitar GlobalNav
• Concedeix a ContentTabList role="navigation" amb un aria-label distintiu com "Page navigation" — separat del punt de referència de GlobalNav
• Concedeix a TrailingContentArea role="complementary" amb un aria-label descriptiu que reflecteixi el seu contingut, per exemple "Student details"
• Dona a cada UtilityPanel un aria-label distintiu: "AI assistant", "Notifications" o "Filters"
• Quan s'obri un UtilityPanel, mou el focus dins del panell; quan es tanqui, retorna el focus al disparador que el va obrir

Ús

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

Estructura

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	Descripció
content	Contingut principal de la pàgina.
filters	Contingut de filtres opcionals dins de la capçalera.
header	Slot de capçalera opcional sota la descripció de la pàgina.
panel	Contingut del panell d'utilitat.
trailing	Contingut complementari final.

Parts

Part	Descripció
.actions	Botons de capçalera opcionals al final de la fila superior.
.container	Columna principal de la pàgina que conté la capçalera i el contingut.
.content	Regió de contingut primari dins de la columna contenidor.
.description	Descripció de la pàgina opcional sota el títol.
.filters	Regió de filtres opcional dins de la capçalera.
.header	Regió de capçalera dins de la columna contenidor.
.info	Contenidor per al títol de la pàgina i la descripció opcional.
.list	Columna de navegació opcional dins del contingut.
.main	Columna de contingut principal dins del contingut.
.panel	Regió del panell d'utilitat que s'obre al costat dret de la pàgina.
.tabs	Pestanyes de navegació opcionals a l'inici de la fila de contingut.
.title	Títol de la pàgina sota la fila superior.
.top	Fila de la graella que conté les migas (breadcrumbs) i utilitats.
.trailing	Columna complementària opcional dins del contingut.
.utilities	Accions d'utilitat al final de la fila superior.

Estats

Estat	Descripció
:optional	—

Tokens consumits

Token	Tipus	Valor
--instui-background-color-page	—	—

Subcomponents

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

Relacionat

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