Browse Templates

Marketing starter

A composed hero, benefits, and FAQ.

Basic

A composed hero, benefits, and FAQ.

View Code

HTML

<section class="stack">
  <p class="eyebrow">
    Design with AI. Build like a pro.
  </p>
  <h2>
    Your next idea.
    <br>
    Ready for the web.
  </h2>
  <p class="muted">
    Thoughtful components, balanced spacing, and a shared design language for you and your AI.
  </p>
  <div class="cluster">
    <a class="btn" href="#details">
      Explore the Details
    </a>
  </div>
</section>
<section id="details" class="panel stack">
  <h2>
    Make it yours.
  </h2>
  <p>
    Replace this example with your product’s story.
  </p>
</section>
<section class="stack">
  <h2>
    Built around your work.
  </h2>
  <div class="grid">
    <article class="panel stack">
      <h3>
        Familiar code
      </h3>
      <p class="muted">
        Semantic HTML and ordinary CSS you can edit.
      </p>
    </article>
    <article class="panel stack">
      <h3>
        Only what you need
      </h3>
      <p class="muted">
        Select the pieces that belong in your project.
      </p>
    </article>
    <article class="panel stack">
      <h3>
        Your design
      </h3>
      <p class="muted">
        Shared tokens keep details consistent.
      </p>
    </article>
  </div>
</section>
<section class="stack">
  <h2>
    Frequently asked questions
  </h2>
  <details>
    <summary>
      Can I use only this component?
    </summary>
    <p>
      Yes. Include the shared base and this component’s CSS. No JavaScript is needed.
    </p>
  </details>
</section>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.css button.css panel.css disclosure.css

Add to your page

<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/button.css">
<link rel="stylesheet" href="/library/assets/panel.css">
<link rel="stylesheet" href="/library/assets/disclosure.css">

11,980 bytes CSS including base · 0 bytes runtime JavaScript

Usage

Tell your story

Replace the sample hero, benefits, and questions with your product’s content. Check heading order and action destinations.

Build on the foundation

The starter includes only its declared component styles. Add your own forms, analytics, or backend when needed.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.