Across UI Kit v2.0

Layout Patterns

Structural patterns for shell experiences.

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

HTML

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

A container with draggable handles to resize panels.

Sidebar

Main Content

Structure: .across-resizable > .across-resizable__panel + .across-resizable__handle

Vertical: Add .across-resizable--vertical to the container.

Layout Patterns

Header

Structure

Resizable