Featured
AboutAbout Story
Founding narrative beside a portrait, with a founding-year callout.
#about#story#narrative
6 frameworksBeginner
Loading…
Dated milestones running down a rail, oldest first.
<!--
Each date is a <time datetime="2019-04">, so the machine-readable value and
the human-readable label are separate strings. "April 2019" can then be
translated, or written "Spring 2019", without the date it encodes changing.
An <ol>, because a history is a sequence - that is the element's job, and it
means a screen reader announces "1 of 5" without the rail being visible.
The rail itself is a ::before on each item and is pure decoration.
-->
<section class="abt-time" aria-labelledby="abt-time-title">
<p class="abt-time__kicker">History</p>
<h2 class="abt-time__title" id="abt-time-title">How we got here</h2>
<ol class="abt-time__list">
<li class="abt-time__item">
<time class="abt-time__date" datetime="2019-04">April 2019</time>
<h3 class="abt-time__event">Two people, one contract</h3>
<p class="abt-time__copy">We took a kitchen table and a six-month engagement and called it a company.</p>
</li>
<li class="abt-time__item">
<time class="abt-time__date" datetime="2021-09">September 2021</time>
<h3 class="abt-time__event">First platform team</h3>
<p class="abt-time__copy">Five engineers, and the first year we turned work down rather than stretch.</p>
</li>
<li class="abt-time__item">
<time class="abt-time__date" datetime="2023-02">February 2023</time>
<h3 class="abt-time__event">The Bristol studio</h3>
<p class="abt-time__copy">A permanent home, and a research practice that stopped being a side project.</p>
</li>
<li class="abt-time__item">
<time class="abt-time__date" datetime="2026-01">January 2026</time>
<h3 class="abt-time__event">Twelve people, nine countries</h3>
<p class="abt-time__copy">Still no account managers. Still the same stubborn question.</p>
</li>
</ol>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
kicker | string | - | Small label shown above the title. |
titlerequired | string | - | Heading text for the card. |
milestonesrequired | Milestone[] | - | The timeline entries, oldest first. |
className | string | - | Additional classes merged onto the root element. |
Each date is a `<time dateTime="2019-04">` with the machine-readable value and the human label kept as separate strings - so "April 2019" can be translated, or rewritten as "Spring 2019", without the date it encodes changing underneath it. An `<ol>`, because a history is a sequence: it announces "1 of 5" even though the rail that shows it is decoration a screen reader cannot see. The rail is a `::before` and the node an `::after`, both on the item itself, so neither can drift from the list; `last:before:hidden` ends the rail at the final milestone rather than trailing it into empty space. On a dark surface the hairline rail lifts to `gray-700` or it simply disappears.