About
About Team Grid
Avatar cards with name, role, short bio and social links.
#about#team#avatar
6 frameworksIntermediate
Loading…
Founding narrative beside a portrait, with a founding-year callout.
<!--
The narrative is real <p> elements, not one blob with <br> between paragraphs:
a screen reader can jump paragraph by paragraph, and a translator gets units
that make sense.
The founding-year callout is an <aside> - it is genuinely tangential to the
prose beside it, which is exactly what the element is for. Its year is a real
text node inside a <p>, not a background image or a ::before, so it can be
read, copied and translated like any other fact on the page.
The portrait's alt is empty because the caption underneath names the person.
Filling both in makes a screen reader say the name twice in a row.
-->
<section class="abt-story" aria-labelledby="abt-story-title">
<div class="abt-story__copy">
<p class="abt-story__kicker">Our story</p>
<h2 class="abt-story__title" id="abt-story-title">We started with one stubborn question</h2>
<p class="abt-story__text">
Why does software that costs a fortune so often ship late and please nobody? We had both
spent a decade inside teams that could not answer it, so in 2019 we left to find out.
</p>
<p class="abt-story__text">
The answer turned out to be unglamorous. Teams were not short of talent or tools - they
were short of a decision-making habit. So that is what we build with our clients now,
and the software is what falls out of it.
</p>
<aside class="abt-story__callout">
<p class="abt-story__year">2019</p>
<p class="abt-story__year-label">Founded in Bristol, two people and one contract</p>
</aside>
</div>
<figure class="abt-story__figure">
<img class="abt-story__image" src="/promo/all-access.svg" alt="" width="480" height="600" />
<figcaption class="abt-story__caption">Priya Raman and Tom Ashcroft, founders</figcaption>
</figure>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
kicker | string | - | Small label shown above the title. |
titlerequired | string | - | Heading text for the card. |
paragraphsrequired | string[] | - | The body copy, one string per paragraph. |
foundingYear | string | - | The year the story starts. |
foundingLabel | string | - | A short line beneath the founding year that gives it context. |
imageSrcrequired | string | - | Image URL for the card's picture. |
imageAlt | string | '' | Alternative text for the image. Empty when the title already names it. |
caption | string | - | The caption describing the figure's contents. |
className | string | - | Additional classes merged onto the root element. |
The narrative is one string per paragraph rendered as real `<p>` elements - never one blob split by `<br>`, which gives a screen reader nothing to jump between and a translator no units that make sense. `max-w-prose` holds the measure even as the column widens, which is why the portrait takes the 5fr side of a 7fr/5fr split rather than half the page. The founding-year callout is an `<aside>` because it is genuinely tangential to the prose beside it, and it wears a left rule rather than a card so it stays a note instead of being promoted into a competing block. The portrait's `alt` is empty on purpose: the caption underneath names the founders, and filling both in makes a screen reader say the names twice in a row.