CSS: wrapper
body[class~="instui-display-flex"] — App-shell row: side nav, container with header, and optional panel.
✅ Use Wrapper when:
Building a full Canvas product page that needs a consistent layout shell
The page uses GlobalNav as the primary navigation anchor
The page needs side panels: ContentTabList, TrailingContentArea, or a UtilityPanel
You need consistent container padding and content max-width across the full page 🚫 Don't use Wrapper when:
Building a Modal, Tray, or Drawer — those have their own layout containers
Wrapping a sub-section of a page — Wrapper contains the full page, not a region
Accessibility
- Map the main content area to a <main> landmark with a skip-nav link so keyboard users can bypass GlobalNav
- Give ContentTabList role="navigation" with a distinct aria-label such as "Page navigation" — separate from GlobalNav's landmark
- Give TrailingContentArea role="complementary" with a descriptive aria-label that reflects its content, such as "Student details"
- Give each UtilityPanel a distinct aria-label: "AI assistant", "Notifications", or "Filters"
- When a UtilityPanel opens, move focus into the panel; when it closes, return focus to the trigger that opened it
Usage
css
@import "@pantoken/plugin-layouts/layouts.css";Structure
text
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~="instui-display-flex"]"]:::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="content"].main"):::cssdoc-part
n21(["slot[name="trailing"].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 | Description |
|---|---|
content | Primary page content. |
filters | Optional filters content inside the header. |
header | Optional header slot below page description. |
panel | Utility panel content. |
trailing | Trailing complementary content. |
Parts
| Part | Description |
|---|---|
.actions | Optional header buttons at the end of the top row. |
.container | Main page column that holds header and content. |
.content | Primary content region inside the container column. |
.description | Optional page description below the title. |
.filters | Optional filters region inside the header. |
.header | Header region inside the container column. |
.info | Container for page title and optional description. |
.list | Optional navigation column inside content. |
.main | Main content column inside content. |
.panel | Utility panel region that opens on the right side of the page. |
.tabs | Optional navigation tabs at the start of the content row. |
.title | Page title below the top row. |
.top | Grid row containing breadcrumbs and utilities. |
.trailing | Optional complementary column inside content. |
.utilities | Utility actions at the end of the top row. |
States
| State | Description |
|---|---|
:optional | — |
Tokens consumed
| Token | Type | Value |
|---|---|---|
--instui-background-color-page | — | — |