Marketing
Inline Newsletter Form
One row, one field, one button - the smallest honest email capture.
#newsletter#inline#email
6 frameworksBeginner
Loading…
A "trusted by" wall of inline-SVG brand marks that wraps instead of overflowing.
<!--
A "trusted by" wall. Each logo is an inline SVG mark plus its wordmark - no
external image files - and the list wraps rather than overflowing at 320px.
-->
<section class="w-full px-4 py-8 text-center" aria-label="Trusted by teams at">
<p class="text-xs font-semibold uppercase tracking-widest text-gray-500 dark:text-gray-400">Trusted by teams at</p>
<ul class="mt-6 flex flex-wrap items-center justify-center gap-x-8 gap-y-5">
<li class="inline-flex items-center gap-2 text-gray-400 transition-colors hover:text-gray-700 motion-reduce:transition-none dark:text-gray-500 dark:hover:text-gray-200">
<svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
<path d="M12 2 3 7v10l9 5 9-5V7z" stroke-linejoin="round" />
</svg>
<span class="text-base font-bold tracking-tight">Northwind</span>
</li>
<!-- repeat <li> per brand -->
</ul>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'Trusted by teams at' | Heading text for the card. |
logosrequired | LogoItem[] | - | Logos |
className | string | - | Additional classes merged onto the root element. |
Each logo is an inline SVG mark plus a wordmark, so there are no external image requests and the marks recolour with `currentColor` on hover. The list is a `flex-wrap` row that reflows at any width rather than scrolling off the edge at 320px. Feed it real brand names via the `logos` prop.