Multi column

Full application shell with an optional top header and 1-3 content columns (left / main / right). Variants control how the body lays out: `full`, `constrained` (centered max-w-7xl), or `sticky` (constrained with sticky side columns at lg+).

Preview

Goodbones

Tom Cook

Primary content area

Secondary column

React preview

LiveView (HEEx)

alias DesignSystem.UI.MultiColumn

<MultiColumn.multi_column variant="constrained" brand_label="Goodbones">
  <:header_trailing>
    <span class="text-sm text-gray-300">{@current_user.name}</span>
  </:header_trailing>
  <:left>
    <!-- nav -->
  </:left>
  <:main>
    <!-- primary content -->
  </:main>
  <:right>
    <!-- secondary column -->
  </:right>
</MultiColumn.multi_column>

React (JSX)

import { MultiColumn } from "../ui/index.mjs"

<MultiColumn
  variant="constrained"
  brandLabel="Goodbones"
  headerTrailing={<span>{user.name}</span>}
  left={<Nav />}
  main={<MainContent />}
  right={<SecondaryColumn />}
/>