Browse Blocks

Call to Action

A focused closing message with a clear next step.

Basic

A focused invitation with a short message and clear actions.

View Code

<section
  class="marketing-block marketing-cta stack gap-lg"
  id="product-start"
  aria-labelledby="product-start-title"
>
  <p class="eyebrow">
    Your next chapter
  </p>
  <h2 id="product-start-title">
    Make room for your next idea.
  </h2>
  <p class="muted">
    Start with a thoughtful foundation. Build something that feels like you.
  </p>
  <div class="cluster gap-md">
    <a class="btn" href="/docs/install">
      Start Building
    </a>
    <a class="btn secondary" href="/docs/ai">
      Build with AI
    </a>
  </div>
</section>

Oversized

A statement-sized heading scales with the block’s width. Use short phrases and intentional line breaks.

View Code

<section
  class="marketing-block marketing-cta marketing-cta-oversized stack gap-lg"
  data-canvas="dots"
  aria-labelledby="statement-title"
>
  <div class="marketing-display-heading">
    <p class="eyebrow">
      Your next chapter
    </p>
    <h2 class="marketing-cta-statement" id="statement-title">
      <span>
        Your next idea.
      </span>
      <span class="text-gradient">
        Beautifully built.
      </span>
    </h2>
  </div>
  <p class="muted">
    Start with a thoughtful foundation. Make something that feels like you.
  </p>
  <div class="cluster gap-md">
    <a class="btn" href="/docs/install">
      Start Building
    </a>
  </div>
</section>

Justified

Keep the message and action together in a compact row that stacks naturally on small screens.

View Code

<section class="marketing-block marketing-cta-row" aria-labelledby="cta-row-title">
  <div class="stack gap-md">
    <p class="eyebrow">
      Ready when you are
    </p>
    <h2 id="cta-row-title">
      Give your next idea a head start.
    </h2>
    <p class="muted">
      Start small. Make it your own.
    </p>
  </div>
  <a class="btn" href="/docs/install">
    Start Building
  </a>
</section>

Inset panel

An inset surface frames a focused invitation. Use your own background class on the panel; its layout does not prescribe a background.

View Code

<section class="marketing-block" aria-labelledby="cta-panel-title">
  <div class="panel marketing-cta-panel marketing-cta stack gap-lg">
    <p class="eyebrow">
      From idea to interface
    </p>
    <h2 id="cta-panel-title">
      A fresh start for your next project.
    </h2>
    <p class="muted">
      Bring your ideas. The foundation is ready.
    </p>
    <a class="btn" href="/docs/install">
      Create Something
    </a>
  </div>
</section>

Split

Pair a clear next step with supporting benefits. The same layout can hold an image or product preview instead.

View Code

<section class="marketing-block marketing-split" aria-labelledby="cta-split-title">
  <div class="marketing-copy stack gap-lg">
    <p class="eyebrow">
      Build with confidence
    </p>
    <h2 id="cta-split-title">
      Less setup. More possibility.
    </h2>
    <p class="muted">
      Start with the essentials, then shape every detail around your project.
    </p>
    <a class="btn" href="/docs/install">
      Start Building
    </a>
  </div>
  <div class="panel marketing-cta-panel stack gap-lg">
    <div class="stack gap-sm">
      <h3>
        One design foundation
      </h3>
      <p class="muted">
        Shared spacing, typography, and themes keep your app consistent.
      </p>
    </div>
    <div class="stack gap-sm">
      <h3>
        Room to make it yours
      </h3>
      <p class="muted">
        Compose native components and utilities around your own ideas.
      </p>
    </div>
  </div>
</section>

Custom background

Any CTA can use your own CSS background, image, or decorative layer. This example defines a project class with an arbitrary gradient—not a required preset.

View Code

<style>
  .launch-background {
    background: radial-gradient(ellipse at 15% 90%, var(--tint), transparent 65%),
      linear-gradient(125deg, var(--soft), var(--surface));
  }
</style>
<section class="marketing-block" aria-labelledby="cta-custom-title">
  <div class="marketing-cta-panel marketing-cta stack gap-lg launch-background">
    <p class="eyebrow">
      Your own direction
    </p>
    <h2 id="cta-custom-title">
      Make something unmistakably yours.
    </h2>
    <p class="muted">
      Your layout. Your background. Your next idea.
    </p>
    <a class="btn" href="/docs/install">
      Start Building
    </a>
  </div>
</section>

Install

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

<section
  class="marketing-block marketing-cta stack gap-lg"
  id="product-start"
  aria-labelledby="product-start-title"
>
  <p class="eyebrow">
    Your next chapter
  </p>
  <h2 id="product-start-title">
    Make room for your next idea.
  </h2>
  <p class="muted">
    Start with a thoughtful foundation. Build something that feels like you.
  </p>
  <div class="cluster gap-md">
    <a class="btn" href="/docs/install">
      Start Building
    </a>
    <a class="btn secondary" href="/docs/ai">
      Build with AI
    </a>
  </div>
</section>

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