Team

Preview Available in release assets

Introduce a finite set of collaborators with names, roles, and optional biographies in a semantic list of articles.

Team in context

<section aria-labelledby="team-heading">
  <h2 id="team-heading">Editorial team</h2>
  <ul class="thin-team">
    <li>
      <article class="thin-team-member">
        <figure>
          <figcaption>
            <strong>Marisol Vega</strong>
            <span class="thin-team-role">Editorial director</span>
          </figcaption>
        </figure>
        <p>Reports on independent publishing from Lima and Berlin.</p>
        <p><a href="/team/marisol-vega/">Read Marisol's field notes</a></p>
      </article>
    </li>
    <li>
      <article class="thin-team-member">
        <figure>
          <figcaption>
            <strong>Rasmus Nordhimmel</strong>
            <span class="thin-team-role">Field correspondent working across an intentionally long localized beat</span>
          </figcaption>
        </figure>
        <p>Covers rural cooperatives and independent workshops across Northern Europe.</p>
        <p><a href="/team/rasmus-nordhimmel/">Read Rasmus's dispatches</a></p>
      </article>
    </li>
    <li>
      <article class="thin-team-member">
        <figure>
          <figcaption>
            <strong>Amara Okoye</strong>
            <span class="thin-team-role">Accessibility editor</span>
          </figcaption>
        </figure>
        <p>Reviews every issue for readable measure, semantic structure, and durable reading order.</p>
      </article>
    </li>
  </ul>
</section>

Show code

<section aria-labelledby="team-heading">
  <h2 id="team-heading">Editorial team</h2>
  <ul class="thin-team">
    <li>
      <article class="thin-team-member">
        <figure>
          <figcaption>
            <strong>Marisol Vega</strong>
            <span class="thin-team-role">Editorial director</span>
          </figcaption>
        </figure>
        <p>Reports on independent publishing from Lima and Berlin.</p>
        <p><a href="/team/marisol-vega/">Read Marisol's field notes</a></p>
      </article>
    </li>
    <li>
      <article class="thin-team-member">
        <figure>
          <figcaption>
            <strong>Rasmus Nordhimmel</strong>
            <span class="thin-team-role">Field correspondent working across an intentionally long localized beat</span>
          </figcaption>
        </figure>
        <p>Covers rural cooperatives and independent workshops across Northern Europe.</p>
        <p><a href="/team/rasmus-nordhimmel/">Read Rasmus's dispatches</a></p>
      </article>
    </li>
    <li>
      <article class="thin-team-member">
        <figure>
          <figcaption>
            <strong>Amara Okoye</strong>
            <span class="thin-team-role">Accessibility editor</span>
          </figcaption>
        </figure>
        <p>Reviews every issue for readable measure, semantic structure, and durable reading order.</p>
      </article>
    </li>
  </ul>
</section>

Anatomy

Section heading
Semantic list
Article per team member
Figure with optional portrait
Figcaption with name and role
Optional biography
Optional destination link

Variants and sizes

Portraits with roles
Text-only members
Members with authored biographies
Members with linked destinations
Uneven biography lengths

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Missing portrait
Long localized role
Anonymous or credited-only member
Narrow container
Wide container
Right-to-left content
High contrast

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Members are static. Linked destinations use ordinary anchors; making the entire card clickable is intentionally not supported.

Accessibility

Provide meaningful portrait alternatives, keep each member accessible through its heading and text, distinguish role from name in accessible order, and never rely on portrait presence for essential information.

Contract: COMPOSE
Basis: Composition of native landmarks, headings, lists, links, and forms; no APG widget

API

Use a labelled section containing ul.thin-team with article.thin-team-member children; put the name and role in figcaption and wrap the role in span.thin-team-role.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Landmarks, headings, links, media, disclosure, and native forms remain useful in normal document flow without CSS or JavaScript.

Assets and dependencies

/foundation.css
/layouts.css
/components.css
/patterns/marketing.css
/icons/sprite.svg

Dependencies: None

Source: packages/ui/src/items/marketing/style.ts