Layout Patterns
Structural patterns for shell experiences.
Header
The application header includes logo, suite switcher, search, theme controls, and navigation.
Structure
.shell-header — Fixed 64px
header
.shell-header__left — Logo, divider, suite
switcher
.shell-header__center — Search trigger
(⌘K)
.shell-header__right — Theme switcher and utilities
<header class="shell-header">
<div class="shell-header__left">
<a href="/" class="shell-header__logo">...</a>
<span class="shell-header__divider"></span>
<!-- Suite Switcher -->
</div>
<div class="shell-header__center">...search trigger...</div>
<div class="shell-header__right">...theme switcher...</div>
</header>Resizable
A container with draggable handles to resize panels.
Structure: .across-resizable > .across-resizable__panel +
.across-resizable__handle
Vertical: Add .across-resizable--vertical to the container.
Divider
Horizontal separator with optional label. Use .across-divider--inset for indented variant or
.across-divider--vertical for vertical orientation.
Structure: .across-divider — empty for a plain line, add text for a labeled
divider.
Layout Primitives
Utility classes for quick flex and grid layouts: .across-row, .across-col,
.across-grid, with gap, alignment, and column modifiers.
.across-row .across-gap-3
.across-grid .across-cols-3 .across-gap-3
Row/Col: .across-row, .across-col
Grid: .across-grid .across-cols-{2|3|4}
Gap: .across-gap-{1-10}
Alignment: .across-align-{start|center|end|stretch},
.across-justify-{start|center|end|between|around}