awards recognition badges strip horizontal trust social-proof certifications awards recognition badges certifications trust strip horizontal accolades awards strip section recognition badges horizontal row certification trust strip with icons
Awards List Strip
Fetch pattern JSON:
curl https://webspire.de/patterns/awards-list/strip.json strip.html
<section class="ws-awards-list ws-awards bg-[var(--ws-color-bg-secondary)] py-16">
<div class="mx-auto max-w-7xl px-6">
<p class="mb-10 text-center text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-color-text-soft)]">Recognition & awards</p>
<div class="flex flex-wrap items-center justify-center gap-6 sm:gap-10">
<!-- Award 1 -->
<div class="flex flex-col items-center gap-2 text-center">
<div class="flex h-16 w-16 items-center justify-center rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)]">
<svg class="h-8 w-8 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 013 3h-15a3 3 0 013-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 01-.982-3.172M9.497 14.25a7.454 7.454 0 00.981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 007.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 002.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 012.916.52 6.003 6.003 0 01-5.395 4.972m0 0a6.726 6.726 0 01-2.749 1.35m0 0a6.772 6.772 0 01-3.044 0"/></svg>
</div>
<p class="text-xs font-semibold text-[var(--ws-color-text)]">Top 10 Finalist</p>
<p class="text-xs text-[var(--ws-color-text-soft)]">RSAC Innovation Sandbox</p>
</div>
<!-- Award 2 -->
<div class="flex flex-col items-center gap-2 text-center">
<div class="flex h-16 w-16 items-center justify-center rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)]">
<svg class="h-8 w-8 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/></svg>
</div>
<p class="text-xs font-semibold text-[var(--ws-color-text)]">Best in Show</p>
<p class="text-xs text-[var(--ws-color-text-soft)]">Black Hat USA 2024</p>
</div>
<!-- Award 3 -->
<div class="flex flex-col items-center gap-2 text-center">
<div class="flex h-16 w-16 items-center justify-center rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)]">
<svg class="h-8 w-8 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"/></svg>
</div>
<p class="text-xs font-semibold text-[var(--ws-color-text)]">G2 Leader</p>
<p class="text-xs text-[var(--ws-color-text-soft)]">Data Security · Winter 2025</p>
</div>
<!-- Award 4 -->
<div class="flex flex-col items-center gap-2 text-center">
<div class="flex h-16 w-16 items-center justify-center rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)]">
<svg class="h-8 w-8 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
</div>
<p class="text-xs font-semibold text-[var(--ws-color-text)]">Cool Vendor</p>
<p class="text-xs text-[var(--ws-color-text-soft)]">Gartner 2024</p>
</div>
<!-- Award 5 -->
<div class="flex flex-col items-center gap-2 text-center">
<div class="flex h-16 w-16 items-center justify-center rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)]">
<svg class="h-8 w-8 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"/></svg>
</div>
<p class="text-xs font-semibold text-[var(--ws-color-text)]">Emerging Vendor</p>
<p class="text-xs text-[var(--ws-color-text-soft)]">Forrester Wave 2025</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
awardsrecognitionbadgesstriphorizontaltrustsocial-proofcertifications
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Optional kicker label above the badges. |
| awards | Yes | Five award badges each with icon container, title, and organization/year. |
Five award badges in a centered horizontal strip that wraps on mobile. Each badge: a square icon container (64×64, rounded-2xl, bordered), an award title, and an organization + year label. Uses Heroicons outline SVGs as placeholders — swap for actual award logo images. The section uses a subtle secondary background to visually separate it from adjacent sections.