Marketing
Inline Newsletter Form
One row, one field, one button - the smallest honest email capture.
#newsletter#inline#email
6 frameworksBeginner
Loading…
A gradient metrics band whose white numerals sit over a contrast scrim.
<!--
A gradient metrics band. White numerals sit on the gradient, so a bg-black/30
scrim layer holds their contrast rather than trusting the gradient. Stats
collapse to one column on phones. The value is the <dd> and the label the
<dt>, reordered visually so the big number reads first.
-->
<section class="relative w-full overflow-hidden rounded-2xl bg-gradient-to-r from-blue-700 via-indigo-700 to-violet-700">
<div class="absolute inset-0 bg-black/30" aria-hidden="true"></div>
<div class="relative px-6 py-10 sm:px-8">
<h2 class="mb-8 text-center text-lg font-semibold text-white/90">Teams ship faster on ADYSRE</h2>
<dl class="grid grid-cols-1 gap-8 text-center sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-col items-center">
<dt class="order-2 mt-1 text-sm font-medium text-white/80">Active teams</dt>
<dd class="order-1 text-3xl font-bold tracking-tight text-white sm:text-4xl">12,000+</dd>
</div>
<!-- repeat per stat -->
</dl>
</div>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Heading text for the card. |
statsrequired | Stat[] | - | Stats |
className | string | - | Additional classes merged onto the root element. |
A `bg-black/30` scrim holds the white numerals at WCAG AA over the full sweep of the gradient. The grid collapses to one column on phones and grows to four. Each stat is a `<dd>` value over a `<dt>` label, reordered visually so the number reads first while the markup stays a real description list.