Footers

<footer class="demo-footer-block sl-stack sl-gap-8">
  <div class="sl-grid sl-md:cols-3 sl-gap-8">
    <div class="sl-stack">
      <a href="/" class="demo-wordmark">Studio.</a>
      <p class="sl-text-muted">A little structure.<br />A lot of possibility.</p>
    </div>
    <nav class="sl-stack" aria-label="Example resource links">
      <h3 class="sl-text-lg">Resources</h3>
      <a href="/getting-started/">Documentation</a><a href="/components/">Components</a
      ><a href="/layouts/">Layouts</a>
    </nav>
    <nav class="sl-stack" aria-label="Example theme links">
      <h3 class="sl-text-lg">Make it yours</h3>
      <a href="/themes/">Design tokens</a
      ><a href="/downloads/styloft.min.css" download>Get the CSS</a>
    </nav>
  </div>
  <hr />
  <div class="sl-cluster sl-justify-between sl-help">
    <span>Illustrative footer · StyloftCSS</span><a href="#main">Back to top ↑</a>
  </div>
</footer>

<footer class="demo-footer-block sl-cluster sl-justify-between sl-gap-6">
  <a href="/" class="demo-wordmark">Notebook.</a>
  <p class="sl-help">Made for the web. Yours to shape.</p>
  <a href="/getting-started/">Start building ↗</a>
</footer>

<footer class="sl-footer sl-stack sl-gap-6 sl-text-center">
  <h3 class="sl-text-xl">Make room for your next idea.</h3>
  <p class="sl-text-muted">A small foundation. Your perspective.</p>
  <div class="sl-cluster sl-justify-center">
    <a class="sl-btn sl-hover-fill" href="/getting-started/"
      >Let's build
      <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>
  <hr />
  <p class="sl-help">Illustrative footer · MIT framework</p>
</footer>

<footer class="sl-footer sl-grid sl-cols-1 sl-md:cols-4 sl-gap-8">
  <div>
    <h3 class="sl-text-lg">StyloftCSS</h3>
    <p class="sl-help sl-my-4">Style more. Load less.</p>
  </div>
  <nav class="sl-stack" aria-label="Learn footer example">
    <h3 class="sl-text-lg">Learn</h3>
    <a href="/getting-started/">Getting started</a><a href="/themes/">Design tokens</a>
  </nav>
  <nav class="sl-stack" aria-label="Explore footer example">
    <h3 class="sl-text-lg">Explore</h3>
    <a href="/components/">Components</a><a href="/themes/">Design tokens</a>
  </nav>
  <nav class="sl-stack" aria-label="Download footer example">
    <h3 class="sl-text-lg">Download</h3>
    <a href="/downloads/styloft.min.css">Core CSS</a
    ><a href="/themes/">Design tokens</a>
  </nav>
</footer>

<footer class="sl-footer sl-cluster sl-justify-between">
  <span class="sl-help">Illustrative workspace · All changes are examples</span>
  <nav class="sl-cluster" aria-label="Workspace footer example">
    <a class="sl-link sl-link--underline" href="/getting-started/">Help</a
    ><a href="/components/">Library</a><a href="#main">Back to top ↑</a>
  </nav>
</footer>

<footer class="sl-footer sl-grid sl-md:cols-2 sl-gap-8">
  <div class="sl-stack">
    <h3 class="sl-text-xl">A little structure.<br />A lot of possibility.</h3>
    <p class="sl-text-muted">Optional modules, independently downloadable.</p>
  </div>
  <nav class="sl-stack" aria-label="Module download example">
    <a href="/downloads/variants.min.css" download>Component variants ↓</a
    ><a href="/downloads/motion.min.css" download>Motion primitives ↓</a
    ><a href="/downloads/responsive.min.css" download>Pixel breakpoints ↓</a>
  </nav>
</footer>