精选
关于我们About Story
Founding narrative beside a portrait, with a founding-year callout.
#about#story#narrative
6 个框架初级
Loading…
Four big metrics with their labels, marked up as a definition list.
<!--
A <dl>: each metric is a value and the term that names it, which is precisely
what a definition list is. Marked up as divs, "12" and "People" are two
unrelated strings and a screen reader reads eight of them in a row with no
hint which label belongs to which number.
Note the dd comes first visually but the dt is the label. That is legal and
intended - flex-direction: column-reverse flips the paint order while the DOM
keeps the term before its definition.
Values are pre-formatted strings ("98%", "£4.2m"), never numbers this
component has to format. Localising currency and percent is the page's job.
-->
<section class="abt-stats" aria-labelledby="abt-stats-title">
<h2 class="abt-stats__title" id="abt-stats-title">Where we are after six years</h2>
<dl class="abt-stats__grid">
<div class="abt-stats__item">
<dt class="abt-stats__label">People</dt>
<dd class="abt-stats__value">12</dd>
</div>
<div class="abt-stats__item">
<dt class="abt-stats__label">Projects shipped</dt>
<dd class="abt-stats__value">148</dd>
</div>
<div class="abt-stats__item">
<dt class="abt-stats__label">Client retention</dt>
<dd class="abt-stats__value">94%</dd>
</div>
<div class="abt-stats__item">
<dt class="abt-stats__label">Countries</dt>
<dd class="abt-stats__value">9</dd>
</div>
</dl>
</section>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
kicker | string | - | 显示在标题上方的小标签。 |
title | string | - | 卡片的标题文本。 |
stats必填 | AboutStat[] | - | 要显示的指标，每项包含数值和标签。 |
className | string | - | 合并到根元素上的额外类名。 |
A `<dl>`, because each metric is a value and the term that names it. As plain divs, "12" and "People" are two unrelated strings, and eight of them in a row give a screen reader no clue which label owns which number. `flex-col-reverse` is what lets the value paint above its label while the DOM keeps `dt` before `dd` - so it still reads aloud as "People, 12". Values are pre-formatted strings ("94%", "£4.2m"); localising currency and percent belongs to the page, not here. Two columns on a phone and four from `sm`: four big numbers across a 390px screen are about 80px each, which is where a stats band stops being legible and starts being a texture.