Code Demo

Install

Add this markup to your page. The build includes the required styles and behavior automatically.

<section
  class="marketing-block marketing-code"
  id="utilities"
  aria-labelledby="utilities-title"
>
  <div class="marketing-copy stack gap-lg">
    <p class="eyebrow">
      CSS utilities
    </p>
    <h2 id="utilities-title" class="text-balance">
      A little markup.
      <br>
      A lot of possibility.
    </h2>
    <p class="muted">
      Fine-tune the details with shared utilities. Change the padding, spacing, and alignment below to see the design and code update together.
    </p>
    <a class="link-underline link-animated" href="/css">
      Explore CSS utilities →
    </a>
  </div>
  <div class="marketing-preview stack gap-lg" data-utility-demo>
    <div class="cluster justify-between items-center">
      <span class="muted" data-demo-step>
        01 / Comfortable spacing
      </span>
      <button class="btn secondary btn-small" type="button" data-demo-playback>
        Pause demo
      </button>
    </div>
    <div class="marketing-utility-controls">
      <label class="field" for="utility-padding">
        Padding
        <span class="select-control">
          <select id="utility-padding" data-utility-control="padding">
            <option value="p-sm">
              Small
            </option>
            <option value="p-md">
              Medium
            </option>
            <option value="p-lg" selected>
              Large
            </option>
          </select>
        </span>
      </label>
      <label class="field" for="utility-gap">
        Spacing
        <span class="select-control">
          <select id="utility-gap" data-utility-control="gap">
            <option value="gap-sm">
              Small
            </option>
            <option value="gap-md" selected>
              Medium
            </option>
            <option value="gap-lg">
              Large
            </option>
          </select>
        </span>
      </label>
      <label class="field" for="utility-alignment">
        Alignment
        <span class="select-control">
          <select id="utility-alignment" data-utility-control="alignment">
            <option value="start" selected>
              Start
            </option>
            <option value="center">
              Center
            </option>
            <option value="end">
              End
            </option>
          </select>
        </span>
      </label>
    </div>
    <div class="marketing-utility-stage">
      <article
        class="panel stack p-lg gap-md items-start text-start"
        data-utility-preview
      >
        <div>
          <span class="badge">
            Your workspace
          </span>
        </div>
        <h3 class="m-0">
          Room for your next idea.
        </h3>
        <p class="muted m-0">
          Make a little space. Make it your own.
        </p>
      </article>
    </div>
    <pre class="code-block" data-language="html">
      <code data-utility-code>
        &lt;
        article class="panel stack p-lg gap-md items-start text-start"
        &gt;
        &lt;
        div
        &gt;
        &lt;
        span class="badge"
        &gt;
        Your workspace
        &lt;
        /span
        &gt;
        &lt;
        /div
        &gt;
        &lt;
        h3 class="m-0"
        &gt;
        Room for your next idea.
        &lt;
        /h3
        &gt;
        &lt;
        p class="muted m-0"
        &gt;
        Make a little space. Make it your own.
        &lt;
        /p
        &gt;
        &lt;
        /article
        &gt;
      </code>
    </pre>
    <p class="visually-hidden" role="status" data-utility-status>
    </p>
  </div>
</section>

New to Layout UI? Follow the Install Guide to set up your project.