Featured
AboutAbout Story
Founding narrative beside a portrait, with a founding-year callout.
#about#story#narrative
6 frameworksBeginner
Loading…
Value cards pairing an icon with a principle and the copy that explains it.
<!--
The principle is the <h3> and the copy explains it - not the other way round.
A values section where the heading is "Value 01" and the principle is buried
in the paragraph gives a screen reader an outline of numbers, and gives anyone
skimming headings nothing at all.
Icons are aria-hidden: a lightbulb next to "Say the hard thing early" adds
decoration, not meaning, and "image, lightbulb" before every principle is
noise between the reader and the point.
-->
<section class="abt-vals" aria-labelledby="abt-vals-title">
<p class="abt-vals__kicker">What we hold to</p>
<h2 class="abt-vals__title" id="abt-vals-title">Four things we will not trade</h2>
<ul class="abt-vals__grid">
<li class="abt-vals__card">
<span class="abt-vals__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
<path d="M9 18h6" /><path d="M10 22h4" /><path d="M15.1 14a5 5 0 1 0-6.2 0" /><path d="M12 14v-3" />
</svg>
</span>
<h3 class="abt-vals__name">Say the hard thing early</h3>
<p class="abt-vals__copy">
Bad news does not improve with age. If the plan is wrong we say so in week one, not at
handover.
</p>
</li>
<li class="abt-vals__card">
<span class="abt-vals__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
<path d="M20 6 9 17l-5-5" />
</svg>
</span>
<h3 class="abt-vals__name">Leave it ownable</h3>
<p class="abt-vals__copy">
Every line we write is one your team has to live with. If they cannot maintain it, we
have not finished.
</p>
</li>
</ul>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
kicker | string | - | Small label shown above the title. |
titlerequired | string | - | Heading text for the card. |
valuesrequired | AboutValue[] | - | The values, each with a name and explanation. |
className | string | - | Additional classes merged onto the root element. |
The principle is the heading and the copy explains it - not the other way round. A values section headed "Value 01" with the principle buried in the paragraph gives the outline a list of numbers and gives anyone skimming headings nothing at all. Icons are `aria-hidden`: a lightbulb beside "Say the hard thing early" is decoration, and "image, lightbulb" before every principle is noise between the reader and the point. The cards are tinted panels rather than bordered boxes, because values are prose and four hairlines around four paragraphs impose a structure the content does not have. Note the tint inverts in dark mode - lighter than the page, where on light it was darker.