Components

Hero

The base hero uses .quanta-hero. Add .fullscreen to span full viewport height.

<section class="quanta-hero">
  <h2 class="quanta-hero-title">Welcome to Quanta</h2>
  <p class="quanta-hero-sub">Build beautiful, responsive UIs fast.</p>
  <a href="#" class="quanta-hero-cta">Get Started</a>
</section>

Welcome to Quanta

Build beautiful, responsive UIs fast.

Get Started

Centered Variant

Add .centered for centered text and content.

<section class="quanta-hero centered">
  <h2 class="quanta-hero-title">Centered Hero</h2>
  <p class="quanta-hero-sub">Everything aligned center.</p>
  <a href="#" class="quanta-hero-cta">Learn More</a>
</section>

Centered Hero

Everything aligned center.

Learn More

Split Layout Variant

Use .split with inner .quanta-hero-content and .quanta-hero-image.

<section class="quanta-hero split">
  <div class="quanta-hero-content">
    <h2 class="quanta-hero-title">Split Hero</h2>
    <p class="quanta-hero-sub">Text on one side, image on the other.</p>
    <a href="#" class="quanta-hero-cta">Discover</a>
  </div>
  <div class="quanta-hero-image">
    <img src="https://picsum.photos/600/400" alt="Sample">
  </div>
</section>

Split Hero

Text on one side, image on the other.

Discover

Overlay Variant

.overlay adds a dark overlay over a background image.

<section class="quanta-hero overlay" style="background-image:url('https://picsum.photos/1200/600')">
  <h2 class="quanta-hero-title">Overlay Hero</h2>
  <p class="quanta-hero-sub">Text stands out on image.</p>
  <a href="#" class="quanta-hero-cta">View Gallery</a>
</section>

Overlay Hero

Text stands out on image.

View Gallery

Minimal Variant

.minimal provides a low‑padding, subdued look.

<section class="quanta-hero minimal">
  <h2 class="quanta-hero-title">Minimal Hero</h2>
  <p class="quanta-hero-sub">Clean and simple.</p>
</section>

Minimal Hero

Clean and simple.