精选
关于我们About Story
Founding narrative beside a portrait, with a founding-year callout.
#about#story#narrative
6 个框架初级
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 | 类型 | 默认值 | 说明 |
|---|---|---|---|
kicker | string | - | 显示在标题上方的小标签。 |
title必填 | string | - | 卡片的标题文本。 |
values必填 | AboutValue[] | - | 价值观，每项包含名称和说明。 |
className | string | - | 合并到根元素上的额外类名。 |
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.