Guidelines

Component Responsiveness

Quanta components are mobile‑first and adapt out of the box using flexible flex, grid, and responsive utilities.

Breakpoints

Use these prefixes for screen‑width queries:

• sm: ≥640px
• md: ≥768px
• lg: ≥1024px
• xl: ≥1280px
• 2xl: ≥1536px

Responsive Layout

Combine percentage widths and grid/flex at breakpoints:

<div class="quanta-card w-full md-w-1/2 lg-w-1/3">…</div>

Utility Classes

Show, hide or change display at breakpoints:

<p class="hidden sm-block lg-inline">…</p>

Live Examples

<div class="d-grid grid-cols-1 sm-grid-cols-2 lg-grid-cols-3 gap-4">
  <div class="quanta-card">…</div>
  <div class="quanta-card">…</div>
  <div class="quanta-card">…</div>
</div>

<nav class="quanta-navbar quanta-navbar-split">
  <button class="quanta-toggle">☰</button>
  <div class="quanta-nav open">…</div>
</nav>