Template

Common layout templates built from Vanduo primitives. These are pure markup patterns — no JavaScript, no special build step. Copy and adapt them as starting points for your own pages.

Page skeleton (navbar + main + footer)
Brand

Page title

Page content goes here.

© 2026 Brand

<!-- Page skeleton: navbar + main + footer -->
<header class="vd-navbar">
  <div class="vd-navbar-container">
    <a href="/" class="vd-navbar-brand">Brand</a>
    <nav class="vd-navbar-nav">
      <a href="/docs" class="vd-nav-link">Docs</a>
      <a href="/about" class="vd-nav-link">About</a>
    </nav>
  </div>
</header>

<main class="vd-container vd-py-8">
  <h1>Page title</h1>
  <p>Page content goes here.</p>
</main>

<footer class="vd-footer">
  <div class="vd-footer-container">
    <p>&copy; 2026 Brand</p>
  </div>
</footer>
Hero

Vanduo UI

Essential just like water is.

Get started
<!-- Hero: glass panel with a heading + CTA -->
<section class="vd-hero vd-glass">
  <div class="vd-hero-content">
    <h1>Vanduo UI</h1>
    <p>Essential just like water is.</p>
    <a href="/docs" class="vd-btn vd-btn-primary vd-btn-lg">Get started</a>
  </div>
</section>
Two-column split (sidebar + content)
Main content
<!-- Two-column split: sidebar + content -->
<div class="vd-row vd-gap-6">
  <aside class="vd-col-12 vd-col-md-3">
    <nav>…sidebar…</nav>
  </aside>
  <section class="vd-col-12 vd-col-md-9">
    …main content…
  </section>
</div>
Card grid
One
Two
Three
<!-- Card grid using grid primitives -->
<div class="vd-grid vd-grid-cols-3 vd-gap-5">
  <div class="vd-card"><div class="vd-card-body">One</div></div>
  <div class="vd-card"><div class="vd-card-body">Two</div></div>
  <div class="vd-card"><div class="vd-card-body">Three</div></div>
</div>
Stack & inline

Section heading

First paragraph.

Second paragraph.

Newv1.6
<!-- Vertical stack with consistent spacing -->
<div class="vd-stack vd-stack-4">
  <h2>Section heading</h2>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</div>

<!-- Horizontal inline row -->
<div class="vd-inline vd-gap-3">
  <span class="vd-badge">New</span>
  <span class="vd-badge">v1.6</span>
</div>
Notes
  • All templates use existing tokens (--vd-color-*, --vd-scale-*) — no new tokens required.
  • Layout primitives (.vd-grid, .vd-stack, .vd-inline) come from css/primitives/primitives.css.
  • Replace the placeholder content; the layout shells are framework-agnostic.