Featured
AboutAbout Story
Founding narrative beside a portrait, with a founding-year callout.
#about#story#narrative
6 frameworksBeginner
Loading…
Culture principles in a check-marked grid, the principle as each heading.
<section class="mx-auto w-full max-w-6xl bg-white px-4 py-12 md:px-6 md:py-16 dark:bg-gray-900" aria-labelledby="abt-culture-title">
<p class="text-xs font-bold uppercase tracking-widest text-blue-700 dark:text-blue-400">How we work</p>
<h2 id="abt-culture-title" class="mt-3 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">
The culture behind the work
</h2>
<ul class="mt-10 grid gap-x-8 gap-y-8 sm:grid-cols-2 lg:grid-cols-3">
<li class="flex gap-3">
<span class="mt-0.5 flex h-6 w-6 flex-none items-center justify-center rounded-full bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300" aria-hidden="true">
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" focusable="false">
<path d="M20 6 9 17l-5-5" />
</svg>
</span>
<div class="min-w-0">
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Default to writing</h3>
<p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">A decision that is not written down did not happen. We argue in documents, not meetings.</p>
</div>
</li>
<li class="flex gap-3">
<span class="mt-0.5 flex h-6 w-6 flex-none items-center justify-center rounded-full bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300" aria-hidden="true">
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" focusable="false">
<path d="M20 6 9 17l-5-5" />
</svg>
</span>
<div class="min-w-0">
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Trust by default</h3>
<p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">No one asks permission to do their job well. We hire adults and treat them like it.</p>
</div>
</li>
<!-- Repeat one <li> per principle. -->
</ul>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
kicker | string | - | Small label shown above the title. |
title | string | - | Heading text for the card. |
valuesrequired | CultureValue[] | - | The values, each with a name and explanation. |
className | string | - | Additional classes merged onto the root element. |
Each principle is the heading and the check is `aria-hidden` decoration, so the outline reads as content rather than a list of ticks. `min-w-0` on the text column lets long words wrap instead of forcing a row past the grid track at 320px.