Cards

<div class="sl-grid sl-md:cols-2 sl-gap-6">
  <article class="sl-card sl-stack demo-feature-card">
    <div class="demo-art demo-art-lavender" aria-hidden="true">
      <span></span><span></span><span></span>
    </div>
    <span class="sl-badge">Foundation</span>
    <h3 class="sl-text-xl">Designed to compose.</h3>
    <p class="sl-text-muted">
      Good defaults. Simple classes. Plenty of room to make it yours.
    </p>
    <a href="/light/layouts/">Explore layouts ↗</a>
  </article>
  <article class="sl-card sl-stack demo-feature-card">
    <div class="demo-art demo-art-peach" aria-hidden="true">
      <span></span><span></span><span></span>
    </div>
    <span class="sl-badge">Expression</span>
    <h3 class="sl-text-xl">A palette of possibility.</h3>
    <p class="sl-text-muted">
      Semantic tokens bring the same visual language to every surface.
    </p>
    <a href="/light/themes/">Meet the tokens ↗</a>
  </article>
</div>

<article class="sl-card sl-stack demo-narrow">
  <div class="sl-cluster sl-justify-between">
    <span class="demo-avatar">S</span><span class="sl-badge">Example project</span>
  </div>
  <h3 class="sl-text-xl">Studio notebook</h3>
  <p class="sl-text-muted">A place for the things you want to build next.</p>
  <hr />
  <div class="sl-cluster sl-justify-between">
    <span class="sl-help">CSS · HTML · Possibility</span
    ><a href="/light/getting-started/">Open guide ↗</a>
  </div>
</article>

<div class="sl-grid sl-md:cols-2 sl-gap-6">
  <article class="sl-card sl-stack sl-hover-lift">
    <h3 class="sl-text-xl">Lift, gently.</h3>
    <p class="sl-text-muted">A link gives this surface a keyboard focus target.</p>
    <a href="/light/getting-started/">Explore the guide ↗</a>
  </article>
  <article class="sl-card sl-stack sl-hover-tilt">
    <h3 class="sl-text-xl">A new angle.</h3>
    <p class="sl-text-muted">
      Perspective adds a small 3D tilt, without pointer-tracking scripts.
    </p>
    <a href="/light/getting-started/">Explore the guide ↗</a>
  </article>
</div>

<div class="sl-grid sl-md:cols-2 sl-gap-6">
  <article class="sl-card sl-stack sl-hover-glow">
    <h3 class="sl-text-xl">A quieter glow.</h3>
    <p class="sl-text-muted">Border and shadow respond together.</p>
    <a href="/light/getting-started/">Explore the guide ↗</a>
  </article>
  <article class="sl-card sl-stack sl-hover-zoom">
    <h3 class="sl-text-xl">A little closer.</h3>
    <p class="sl-text-muted">A restrained scale effect, with a smooth exit.</p>
    <a href="/light/getting-started/">Explore the guide ↗</a>
  </article>
</div>

<div class="sl-grid sl-md:cols-2 sl-gap-6">
  <article class="sl-card sl-stack sl-card--accent">
    <h3 class="sl-text-xl">The accent card.</h3>
    <p class="sl-text-muted">A semantic accent stripe marks the edge.</p>
    <a href="/light/getting-started/">Explore the guide ↗</a>
  </article>
  <article class="sl-card sl-stack sl-card--outline">
    <h3 class="sl-text-xl">The outline card.</h3>
    <p class="sl-text-muted">A transparent surface and a stronger border.</p>
    <a href="/light/getting-started/">Explore the guide ↗</a>
  </article>
</div>

<article class="sl-card sl-card--horizontal">
  <div>
    <span class="sl-avatar" aria-hidden="true">JD</span>
    <h3 class="sl-text-xl sl-my-4">Jordan Doe</h3>
    <p class="sl-help">Illustrative profile</p>
  </div>
  <div class="sl-stack">
    <p>A flexible horizontal pattern that wraps on small screens.</p>
    <a class="sl-btn sl-btn--outline" href="/light/layouts/"
      >Explore layouts
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        aria-hidden="true"
      >
        <path d="M5 12h14m-6-6 6 6-6 6" /></svg
    ></a>
  </div>
</article>

<div class="sl-grid sl-md:cols-2 sl-lg:cols-3 sl-gap-6">
  <figure class="sl-card sl-hover-lift sl-stack sl-gap-6">
    <p class="sl-help">Sample testimonial</p>
    <blockquote>
      <p>
        “The spacing and typography gave our prototype a clear rhythm from the very
        first screen.”
      </p>
    </blockquote>
    <figcaption class="sl-cluster sl-gap-4">
      <span class="sl-badge" aria-hidden="true">MC</span>
      <div>
        <p><strong>Maya Chen</strong></p>
        <p class="sl-help">Product designer · North Studio</p>
      </div>
    </figcaption>
  </figure>
  <figure class="sl-card sl-hover-lift sl-stack sl-gap-6">
    <p class="sl-help">Sample testimonial</p>
    <blockquote>
      <p>
        “I could compose a clean interface with familiar HTML and just the CSS modules I
        needed.”
      </p>
    </blockquote>
    <figcaption class="sl-cluster sl-gap-4">
      <span class="sl-badge" aria-hidden="true">AM</span>
      <div>
        <p><strong>Alex Morgan</strong></p>
        <p class="sl-help">Frontend developer · Fieldwork</p>
      </div>
    </figcaption>
  </figure>
  <figure class="sl-card sl-hover-lift sl-stack sl-gap-6">
    <p class="sl-help">Sample testimonial</p>
    <blockquote>
      <p>
        “The same cards feel considered in both themes, with room for our own visual
        identity.”
      </p>
    </blockquote>
    <figcaption class="sl-cluster sl-gap-4">
      <span class="sl-badge" aria-hidden="true">PS</span>
      <div>
        <p><strong>Priya Shah</strong></p>
        <p class="sl-help">Creative lead · Paper & Form</p>
      </div>
    </figcaption>
  </figure>
</div>