Feature Showcase

Install

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

<section
  class="marketing-block marketing-split"
  id="playground"
  aria-labelledby="components-title"
>
  <div class="marketing-copy stack gap-lg">
    <p class="eyebrow">
      Components
    </p>
    <h2 id="components-title" class="text-balance">
      The details, already considered.
    </h2>
    <p class="muted">
      Build with thoughtful controls, clear feedback, and natural motion. Shared states bring a consistent feel to every interaction.
    </p>
    <a class="link-underline link-animated" href="/components">
      Explore the components →
    </a>
  </div>
  <div class="marketing-preview">
    <form class="panel stack gap-lg p-lg" data-validate="check" data-demo-project>
      <div class="cluster justify-between items-center">
        <span class="badge">
          Your next idea
        </span>
        <span class="icon" data-icon="folder" aria-hidden="true">
        </span>
      </div>
      <div class="stack gap-sm">
        <h3 class="m-0">
          Make something worth sharing.
        </h3>
        <p class="muted m-0">
          Give your project a name. We’ll take care of the details.
        </p>
      </div>
      <p data-validate-summary role="status">
      </p>
      <div class="field">
        <label for="demo-project-name">
          Project Name
          <span class="required-marker" aria-hidden="true">
            *
          </span>
        </label>
        <input
          class="input"
          id="demo-project-name"
          name="project"
          required
          minlength="3"
          maxlength="60"
          placeholder="A new beginning"
          aria-describedby="demo-project-help"
        >
        <p class="muted" id="demo-project-help">
          Required · At least 3 characters.
        </p>
      </div>
      <label class="checkbox">
        <input type="checkbox" name="private" checked>
        <span>
          Keep this project private
        </span>
      </label>
      <div class="cluster gap-md">
        <button class="btn btn-gradient" type="submit">
          <span class="icon" data-icon="plus" aria-hidden="true">
          </span>
          Create Project
        </button>
        <button class="btn ghost" type="reset">
          Reset
        </button>
      </div>
      <p class="muted" data-demo-project-result role="status">
        Try it here. Nothing is sent or saved.
      </p>
    </form>
  </div>
</section>

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