Components

Pricing

The .quanta-pricing container holds one or more pricing cards (.quanta-plan). Each card supports title, price, feature list, and a call‑to‑action. Use modifier classes to switch between outline, glass, and featured styles, and to control alignment.

Basic Usage

Wrap your plans in .quanta-pricing and each plan in .quanta-plan with alignment utility (.quanta-plan-center shown here).

<div class="quanta-pricing">
  <div class="quanta-plan quanta-plan-center">
    <header>
      <h3 class="quanta-plan-title">Basic</h3>
      <p class="quanta-plan-price">$9/month</p>
    </header>
    <ul class="quanta-plan-features">
      <li><span class="check-icon">✔</span> Feature A</li>
      <li><span class="check-icon">✔</span> Feature B</li>
    </ul>
    <div class="quanta-plan-cta">
      <button class="quanta-btn quanta-btn-primary">Select</button>
    </div>
  </div>
</div>

Outline Variant

Add .quanta-plan-outline for a ghost card with border only.

<div class="quanta-plan quanta-plan-outline">…</div>

Glass Variant

Use .quanta-plan-glass for a translucent, backdrop‑blur effect.

<div class="quanta-plan quanta-plan-glass quanta-plan-center">…</div>

Featured Plan

Highlight a plan with .quanta-plan-featured: larger border and slight scale.

<div class="quanta-plan quanta-plan-featured quanta-plan-center">…</div>

Layout & Alignment

Control text alignment in each card:

• .quanta-plan-left — left‑align header & features
• .quanta-plan-center — center‑align (default)
• .quanta-plan-right — right‑align

Responsive & Dark Mode

Cards wrap into multiple rows on small screens. In dark mode, backgrounds, borders, and text colors adapt automatically.