Roosevelt Docs
Roosevelt Docs
Welkom
Architecture
Workflows
Infrastructure
AI & Automation
API Reference
Design System
Design System

Foundations

Design TokensTypographyColorsSpacingMotion

Components

ComponentsButtonCardBadgeInputNavigation

Patterns

LayoutFormsFeedback

Guidelines

AccessibilityDark ModeFigma Handoff
Guides
Design System

Layout

Grid systeem, containers en section patronen

Layout

Roosevelt OPS gebruikt een responsive 12-koloms grid met vaste breakpoints.

Grid Systeem

PropertyMobileTabletDesktop
Columns4812
Gutter16px24px32px
Margin16px32px64px
Max width——1280px

Container

<div class="mx-auto max-w-7xl px-4 sm:px-8 lg:px-16">
  <!-- Content -->
</div>

Section Pattern

<section class="py-16 lg:py-24">
  <div class="mx-auto max-w-7xl px-4 sm:px-8 lg:px-16">
    <h2 class="text-title-l font-semibold text-label-primary">Sectie Titel</h2>
    <p class="mt-2 text-subtitle text-label-secondary">Beschrijving.</p>
    <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <!-- Cards -->
    </div>
  </div>
</section>

Breakpoints

NaamWaardeTailwind prefix
Mobile0–639px(default)
Tablet640–1023pxsm:
Desktop1024–1279pxlg:
Wide1280px+xl:

Max Widths

GebruikClassWaarde
Contentmax-w-3xl768px
Default containermax-w-7xl1280px
Full widthmax-w-full100%

Two-Column Layout

<div class="grid gap-8 lg:grid-cols-[1fr_2fr]">
  <aside class="space-y-4">Sidebar</aside>
  <main class="space-y-8">Main content</main>
</div>

Previous

Navigation

Next

Forms

On this page

LayoutGrid SysteemContainerSection PatternBreakpointsMax WidthsTwo-Column Layout