About Story
Founding narrative beside a portrait, with a founding-year callout.
6 frameworksBeginner
A signed letter from the founder with an initials-avatar signature block.
<section class="mx-auto w-full max-w-2xl bg-white px-4 py-12 md:py-16 dark:bg-gray-900" aria-labelledby="abt-founder-title">
<p class="text-xs font-bold uppercase tracking-widest text-blue-700 dark:text-blue-400">A note from our founder</p>
<h2 id="abt-founder-title" class="mt-3 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">
Why we still answer the phone
</h2>
<div class="mt-6 space-y-4 leading-[1.75] text-gray-600 dark:text-gray-400">
<p>When we started, I promised myself we would never grow past the point of knowing every client by name. Six years on, that promise is the hardest and most useful constraint we have.</p>
<p>It is why we turn work down, why we ship slower than some, and why the people who build your software are the people you actually talk to.</p>
</div>
<!-- A real signature block: an avatar of initials, a name and a role, not an image of a scribble. -->
<figcaption class="mt-8 flex items-center gap-3 not-italic">
<span class="flex h-11 w-11 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-700 dark:bg-blue-950 dark:text-blue-300" aria-hidden="true">PR</span>
<span>
<span class="block text-sm font-semibold text-gray-900 dark:text-gray-100">Priya Raman</span>
<span class="block text-sm text-gray-500 dark:text-gray-400">Co-founder & CEO</span>
</span>
</figcaption>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
kicker | string | - | Small label shown above the title. |
titlerequired | string | - | Heading text for the card. |
paragraphsrequired | string[] | - | The body copy, one string per paragraph. |
signatureNamerequired | string | - | Signature name |
signatureRole | string | - | Signature role |
initials | string | - | Initials |
className | string | - | Additional classes merged onto the root element. |
The signature is a real `figcaption` - an initials avatar, a name and a role - not an image of a scribble, so it stays legible and translatable. Omit `initials` and the avatar is dropped; the letter body is one string per paragraph.