Feature Sections

Milestone Feature Timeline

This block is useful when a page needs to show sequence and progression instead of a flat grid of features.

timelinefeaturesroadmapsteps

Live preview

Release path

Ship a stronger page in three calm steps.

Structure the message

Lock the headline, CTA order, and proof stack before styling details steal attention.

Apply visual hierarchy

Use bolder type, warmer accents, and card contrast to make scanning easier.

Polish the conversion edges

Refine buttons, spacing, and supporting notes so the page feels complete without clutter.

HTML + Tailwind

Copy-ready code

<section class="rounded-[32px] border border-slate-200 bg-white p-6 shadow-sm">
  <div class="space-y-6">
    <div class="space-y-2">
      <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Release path</p>
      <h2 class="text-2xl font-semibold text-slate-950">Ship a stronger page in three calm steps.</h2>
    </div>
    <div class="space-y-4">
      <div class="flex gap-4">
        <div class="flex flex-col items-center">
          <div class="h-10 w-10 rounded-full bg-slate-950 text-center text-sm font-semibold leading-10 text-white">1</div>
          <div class="mt-2 h-full w-px bg-slate-200"></div>
        </div>
        <div class="pb-6">
          <p class="text-base font-semibold text-slate-950">Structure the message</p>
          <p class="mt-2 text-sm leading-6 text-slate-600">Lock the headline, CTA order, and proof stack before styling details steal attention.</p>
        </div>
      </div>
      <div class="flex gap-4">
        <div class="flex flex-col items-center">
          <div class="h-10 w-10 rounded-full bg-slate-100 text-center text-sm font-semibold leading-10 text-slate-900">2</div>
          <div class="mt-2 h-full w-px bg-slate-200"></div>
        </div>
        <div class="pb-6">
          <p class="text-base font-semibold text-slate-950">Apply visual hierarchy</p>
          <p class="mt-2 text-sm leading-6 text-slate-600">Use bolder type, warmer accents, and card contrast to make scanning easier.</p>
        </div>
      </div>
      <div class="flex gap-4">
        <div class="flex flex-col items-center">
          <div class="h-10 w-10 rounded-full bg-sky-100 text-center text-sm font-semibold leading-10 text-sky-700">3</div>
        </div>
        <div>
          <p class="text-base font-semibold text-slate-950">Polish the conversion edges</p>
          <p class="mt-2 text-sm leading-6 text-slate-600">Refine buttons, spacing, and supporting notes so the page feels complete without clutter.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Related blocks

Workflow engine

Route work with fewer clicks and clearer ownership.

Core

Speed

2.4x

Faster setup from template to production-ready surface.

Shared tokens and tighter visual rhythm

Clear handoff notes

Document intent, states, and edge cases directly inside the UI system.

Readable defaults

Whitespace and contrast tuned for long sessions, not just hero screenshots.

Feature Sections

Signal Bento Features

A feature bento grid with mixed card density, stat callouts, and directional emphasis.

featuresbentoproductgrid

Open block

Shipping fast UI systems for modern apps

Build a sharper product surface before your first user lands.

Layered typography, strong spacing, and conversion-ready CTAs for startup launches, product reveals, and campaign microsites.

Start free See demo

Teams

1.2k

Launches

184

Avg. uplift

31%

Hero Sections

Aurora Launch Hero

A cinematic hero with layered gradients, trust stats, and two focused calls to action.

herolanding pagesaascta

Open block

MRR

$42k

Churn

1.8%

Activation

68%

Weekly activity

+12%

Dashboard

Command Center Shell

A dense dashboard shell with a compact rail, summary cards, and activity surfaces.

dashboardadminanalyticssaas

Open block