container.max-width-sm | calc(var(--spacing) * 96) | Container max-width for small screens (384px) |
container.max-width-md | calc(var(--spacing) * 112) | Container max-width for medium screens (448px) |
container.max-width-lg | calc(var(--spacing) * 128) | Container max-width for large screens (512px) |
container.max-width-xl | calc(var(--spacing) * 144) | Container max-width for extra-large screens (576px) |
container.max-width-2xl | calc(var(--spacing) * 168) | Container max-width for 2xl screens (672px) |
container.max-width-3xl | calc(var(--spacing) * 192) | Container max-width for 3xl screens (768px) |
container.max-width-4xl | calc(var(--spacing) * 224) | Container max-width for 4xl screens (896px) |
container.max-width-5xl | calc(var(--spacing) * 256) | Container max-width for 5xl screens (1024px) |
container.max-width-6xl | calc(var(--spacing) * 288) | Container max-width for 6xl screens (1152px) |
container.max-width-7xl | calc(var(--spacing) * 320) | Container max-width for 7xl screens (1280px) |
container.padding-inline | {page.padding-default} | Horizontal padding for page container — scales with density |
container.padding-inline-mobile | {section.padding-default} | Horizontal padding for mobile container — scales with density |
layout.sidebar-width | calc(var(--spacing) * 80) | Default sidebar width (320px) |
layout.sidebar-width-collapsed | calc(var(--spacing) * 16) | Collapsed sidebar width (64px) |
layout.content-max-width | calc(var(--spacing) * 224) | Content area max-width (896px) — for readable content |
layout.content-max-width-wide | calc(var(--spacing) * 288) | Wide content area max-width (1152px) — for dashboards |
layout.navbar-height | calc(var(--spacing) * 16) | Default navbar height (64px) |
layout.navbar-height-compact | calc(var(--spacing) * 12) | Compact navbar height (48px) |