Featured
AboutAbout Story
Founding narrative beside a portrait, with a founding-year callout.
#about#story#narrative
6 frameworksBeginner
Loading…
A large heading in one column and the lead paragraphs in the other.
<section class="mx-auto grid w-full max-w-6xl gap-8 bg-white px-4 py-12 md:grid-cols-2 md:gap-16 md:px-6 md:py-16 dark:bg-gray-900" aria-labelledby="abt-intro-title">
<div>
<p class="text-xs font-bold uppercase tracking-widest text-blue-700 dark:text-blue-400">About us</p>
<h2 id="abt-intro-title" class="mt-3 text-2xl font-bold leading-tight tracking-tight text-gray-900 sm:text-4xl dark:text-gray-100">
A small team with an unfashionable habit of finishing things
</h2>
</div>
<div class="space-y-4 leading-[1.75] text-gray-600 dark:text-gray-400 md:pt-2">
<p>We are a product studio of twelve, spread across nine countries, working with teams who would rather ship one good thing than plan ten.</p>
<p>The heading sits in its own column so it can run large without crowding the prose, and the two stack cleanly the moment the screen is too narrow to hold both.</p>
</div>
</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. |
className | string | - | Additional classes merged onto the root element. |
The heading owns its own column so it can run large without crowding the prose, and the two stack in source order the moment the screen is too narrow. Paragraphs are one string each, rendered as real `<p>` elements.