Layout & Spacing

Structural patterns for page composition, container sizing, and the standard page template.

Container Widths

Three container widths cover all content scenarios. Use the narrowest option that fits the content.

Page Template

Every page in the ONCE site follows this skeleton. The Navbar and Footer are always present; only the inner content changes.

const PageName = () => {
  return (
    <main className="min-h-screen bg-once-bg">
      <Navbar />
      {/* Page content */}
      <Footer />
    </main>
  );
};

Key rules

• Background is always bg-once-bg (#070D19) for the outermost wrapper
• min-h-screen ensures the page fills the viewport even when content is short
• Navbar and Footer are shared components — never inline their markup

Section Spacing

Content sections are separated with consistent vertical rhythm:

Grid Patterns

Card Grid

The standard card layout uses CSS Grid with auto-fit to adapt from one column on mobile to multiple columns on wider screens:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 24px 0;
}

No breakpoint media queries needed — the minmax function handles responsive behavior.

Two-Column Layout

For side-by-side content (e.g., a preview alongside code), use a simple flex row:

<div style={{ display: 'flex', gap: '24px', alignItems: 'flex-start' }}>
  <div style={{ flex: 1 }}>{/* Content */}</div>
  <div style={{ flex: 1 }}>{/* Preview */}</div>
</div>

On mobile, let flex items wrap naturally or switch to a single column with a media query.

Docs Navigation Width

The documentation site (Nextra) constrains the main nav to 64rem (1024px):

.nextra-nav-container nav {
  max-width: 64rem !important;
}

Sidebar collapse is set at level 2 by default, keeping section groups open while their children start collapsed.