Flex & rows

<div class="sl-cluster sl-justify-between sl-gap-6">
  <div class="sl-cluster sl-gap-2">
    <span class="sl-badge">Design</span><span class="sl-badge">Development</span
    ><span class="sl-badge">Good defaults</span>
  </div>
  <a class="sl-btn sl-btn--outline" href="/layouts/">Explore patterns ↗</a>
</div>

<div class="sl-sidebar sl-gap-6">
  <aside class="sl-card sl-stack">
    <h3 class="sl-text-lg">On this page</h3>
    <a href="/getting-started/">The foundation</a><a href="/themes/">Your palette</a>
  </aside>
  <article class="sl-card sl-stack">
    <h3 class="sl-text-xl">Your content, in focus.</h3>
    <p class="sl-text-muted">
      A flexible content region beside a comfortable navigation column. No fixed pixel
      widths.
    </p>
  </article>
</div>

<div class="sl-flex sl-row sl-down-767:column sl-gap-4">
  <div class="sl-card sl-grow">First item</div>
  <div class="sl-card sl-grow">Second item</div>
  <a href="/layouts/" class="sl-btn"
    >See 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>

<div class="sl-card sl-cluster sl-justify-between">
  <p class="sl-help">Illustrative settings action bar</p>
  <div class="sl-cluster">
    <button type="button" class="sl-btn sl-btn--ghost">Cancel example</button
    ><button type="button" class="sl-btn sl-hover-sheen">
      Save example
      <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>
    </button>
  </div>
</div>