CSS: wrapper

body[class~="instui-display-flex"] — Fila de la app-shell: navegación lateral, contenedor con encabezado y panel opcional.

✅ Usar Wrapper cuando:

• Se construye una página de producto completa de Canvas que necesita una estructura de diseño consistente

• La página usa GlobalNav como el ancla de navegación principal

• La página necesita paneles laterales: ContentTabList, TrailingContentArea o un UtilityPanel

• Necesitas un relleno de contenedor y un ancho máximo de contenido consistentes en toda la página 🚫 No usar Wrapper cuando:

• Se construye un Modal, Tray o Drawer — esos tienen sus propios contenedores de diseño

• Se envuelve una subsección de una página — Wrapper contiene la página completa, no una región

Accesibilidad

• Mapear el área de contenido principal a un punto de referencia <main> con un enlace de omitir navegación para que los usuarios de teclado puedan evitar GlobalNav
• Dar a ContentTabList role="navigation" con un aria-label distinto como "Page navigation" — separado del punto de referencia de GlobalNav
• Dar a TrailingContentArea role="complementary" con un aria-label descriptivo que refleje su contenido, por ejemplo "Student details"
• Dar a cada UtilityPanel un aria-label distinto: "AI assistant", "Notifications" o "Filters"
• Cuando se abra un UtilityPanel, mover el foco al panel; cuando se cierre, devolver el foco al activador que lo abrió

Uso

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

Ranuras

Ranura	Descripción
content	Contenido principal de la página.
filters	Contenido de filtros opcionales dentro del encabezado.
header	Ranura de encabezado opcional debajo de la descripción de la página.
panel	Contenido del panel de utilidades.
trailing	Contenido complementario final.

Partes

Parte	Descripción
.actions	Botones opcionales del encabezado al final de la fila superior.
.container	Columna principal de la página que contiene el encabezado y el contenido.
.content	Región de contenido principal dentro de la columna contenedora.
.description	Descripción de página opcional debajo del título.
.filters	Región opcional de filtros dentro del encabezado.
.header	Región de encabezado dentro de la columna contenedora.
.info	Contenedor para el título de la página y la descripción opcional.
.list	Columna de navegación opcional dentro del contenido.
.main	Columna de contenido principal dentro del contenido.
.panel	Región del panel de utilidades que se abre en el lado derecho de la página.
.tabs	Pestañas de navegación opcionales al inicio de la fila de contenido.
.title	Título de la página debajo de la fila superior.
.top	Fila de la cuadrícula que contiene migas de pan y utilidades.
.trailing	Columna complementaria opcional dentro del contenido.
.utilities	Acciones de utilidades al final de la fila superior.

Estados

Estado	Descripción
:optional	—

Tokens consumidos

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

Subcomponentes

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

Relacionado

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