Featured
AboutAbout Story
Founding narrative beside a portrait, with a founding-year callout.
#about#story#narrative
6 frameworksBeginner
Loading…
Avatar cards with name, role, short bio and social links.
<!--
Every avatar has alt="" and every social link has its own aria-label naming
the person: "Priya Raman on LinkedIn", not "LinkedIn". A grid of eight people
otherwise announces as eight identical "LinkedIn / GitHub" pairs, and the
links-list dialog every screen reader offers becomes useless.
Roles are <p>, not <h4>: a job title is not a section of the document, and
promoting it to a heading puts sixteen phantom entries in the outline.
-->
<section class="abt-team" aria-labelledby="abt-team-title">
<p class="abt-team__kicker">The team</p>
<h2 class="abt-team__title" id="abt-team-title">Twelve people, no account managers</h2>
<ul class="abt-team__grid">
<li class="abt-team__card">
<img class="abt-team__avatar" src="/promo/all-access.svg" alt="" width="96" height="96" />
<h3 class="abt-team__name">Priya Raman</h3>
<p class="abt-team__role">Co-founder, strategy</p>
<p class="abt-team__bio">Fifteen years turning vague briefs into things that can be built.</p>
<ul class="abt-team__socials">
<li>
<a class="abt-team__social" href="https://example.com/in/priya" aria-label="Priya Raman on LinkedIn">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.7h.05a4.2 4.2 0 0 1 3.75-2c4 0 4.75 2.6 4.75 6V21h-4v-5.3c0-1.3 0-2.9-1.8-2.9s-2.05 1.4-2.05 2.8V21h-4V9Z" />
</svg>
</a>
</li>
<li>
<a class="abt-team__social" href="https://example.com/priya" aria-label="Priya Raman on GitHub">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.53 2.34 1.09 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.5 9.5 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.69-4.57 4.93.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2Z" />
</svg>
</a>
</li>
</ul>
</li>
</ul>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
kicker | string | - | Small label shown above the title. |
titlerequired | string | - | Heading text for the card. |
membersrequired | TeamMember[] | - | The people shown in the grid. |
className | string | - | Additional classes merged onto the root element. |
The social links compose their accessible name from the person: "Priya Raman on LinkedIn", not "LinkedIn". Twelve people otherwise announce as twelve identical LinkedIn/GitHub pairs, and the links dialog every screen reader offers becomes worthless. Avatars carry `alt=""` because the heading beneath is the name - put it in both and it is announced twice, back to back. Roles are `<p>`, not `<h4>`: a job title is not a section of the document, and promoting it puts one phantom entry per person in the outline. The avatar is a fixed square plus `object-fit: cover`, so a portrait and a landscape headshot both land as the same circle instead of one squashing; the 36px social target stays put even though the glyph inside is 18px.