Card

Every section is styled as a bordered, padded card — write semantic HTML and get layout for free.

Basic Card

Getting started

Install launch.css and write semantic HTML. No class names required.

<section>
  <h3>Getting started</h3>
  <p>Install launch.css and write semantic HTML. No class names required.</p>
  <button>Learn more</button>
</section>

Multiple Cards

Zero classes

Style elements directly with sensible defaults.

Light & dark

Themes via color-scheme — no JavaScript needed.

Layouts

Website and dashboard layouts with a data attribute.

<div role="grid">
  <section>
    <h3>Zero classes</h3>
    <p>Style elements directly with sensible defaults.</p>
  </section>
  <section>
    <h3>Light & dark</h3>
    <p>Themes via color-scheme — no JavaScript needed.</p>
  </section>
  <section>
    <h3>Layouts</h3>
    <p>Website and dashboard layouts with a data attribute.</p>
  </section>
</div>

Card With Form

Get product updates in your inbox.

<section>
  <h3>Subscribe</h3>
  <p>Get product updates in your inbox.</p>
  <form>
    <label>
      Email
      <input type="email" placeholder="you@example.com">
    </label>
    <button type="submit">Subscribe</button>
  </form>
</section>