Feature Sections

Signal Bento Features

Ideal for homepages and feature pages that need a modern product feel without repeating identical cards.

featuresbentoproductgrid

Vista previa

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.

HTML + Tailwind

Código listo para copiar

<section class="rounded-[32px] border border-slate-200 bg-white p-6 shadow-sm">
  <div class="grid gap-4 sm:grid-cols-2">
    <article class="rounded-[28px] bg-slate-950 p-5 text-white sm:col-span-2">
      <div class="flex items-start justify-between gap-4">
        <div>
          <p class="text-xs uppercase tracking-[0.24em] text-slate-400">Workflow engine</p>
          <h2 class="mt-3 text-2xl font-semibold">Route work with fewer clicks and clearer ownership.</h2>
        </div>
        <span class="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-slate-300">Core</span>
      </div>
    </article>
    <article class="rounded-[28px] border border-slate-200 bg-slate-50 p-5">
      <p class="text-xs uppercase tracking-[0.24em] text-slate-500">Speed</p>
      <p class="mt-3 text-3xl font-semibold text-slate-950">2.4x</p>
      <p class="mt-2 text-sm text-slate-600">Faster setup from template to production-ready surface.</p>
    </article>
    <article class="rounded-[28px] border border-slate-200 bg-white p-5">
      <div class="h-20 rounded-[22px] bg-gradient-to-r from-cyan-100 via-sky-100 to-indigo-100"></div>
      <p class="mt-4 text-base font-semibold text-slate-950">Shared tokens and tighter visual rhythm</p>
    </article>
    <article class="rounded-[28px] border border-slate-200 bg-white p-5">
      <p class="text-base font-semibold text-slate-950">Clear handoff notes</p>
      <p class="mt-2 text-sm leading-6 text-slate-600">Document intent, states, and edge cases directly inside the UI system.</p>
    </article>
    <article class="rounded-[28px] border border-slate-200 bg-emerald-50 p-5">
      <p class="text-base font-semibold text-slate-950">Readable defaults</p>
      <p class="mt-2 text-sm leading-6 text-slate-600">Whitespace and contrast tuned for long sessions, not just hero screenshots.</p>
    </article>
  </div>
</section>

Bloques relacionados

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.

Feature Sections

Milestone Feature Timeline

A timeline-style section for roadmap highlights, releases, or service delivery steps.

timelinefeaturesroadmapsteps

Abrir bloque

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

Abrir bloque

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

Abrir bloque