Layouts

Common page layout patterns.

Sidebar + Main

Classic app layout with fixed sidebar.

<div class="sw-layout-with-sidebar">
  <aside class="sw-sidebar">
    <div class="sw-sidebar-header">App Name</div>
    <nav>...</nav>
  </aside>
  <main class="sw-main">
    <!-- Page content -->
  </main>
</div>

Centered Card

For auth pages, onboarding, and single-focus views.

CSS

.sw-layout-with-sidebar {
  display: flex;
  min-height: 100vh;
}

.sw-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--sw-bg-card);
  border-right: 1px solid var(--sw-border-default);
}

.sw-main {
  flex: 1;
  background: var(--sw-bg-page);
  padding: var(--sw-space-10);
}

.sw-layout-centered {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sw-space-6);
  background: var(--sw-bg-page);
}