Blocks / Team Grid

Team Grid beta Pro

The people page in one block: six members with avatars, roles and one honest line each.

Preview
AR

Aoki Ren

Founder, Systems

Built the mold. Still argues with it, wins about half.

MS

Mara Sato

Design Lead

Owns the tokens and the vermillion’s one allowed seat.

JK

Jun Kato

Engineering

Wrote the QR encoder from the spec, for fun, correctly.

TP

Tomas Park

Engineering

Keeps the check honest. Deletes more than he adds.

IN

Ines Novak

Documentation

Wrote the usage notes people actually read.

OB

Omar Haddad

Support

Answers in under a day, in full sentences.

Built from: Avatar — include their CSS alongside this block.

<div class="k-team">
    <div class="k-team-c"><span class="k-avatar">AR</span><h3>Aoki Ren</h3><p class="r">Founder, Systems</p><p class="b">Built the mold. Still argues with it, wins about half.</p></div>
    <div class="k-team-c"><span class="k-avatar">MS</span><h3>Mara Sato</h3><p class="r">Design Lead</p><p class="b">Owns the tokens and the vermillion’s one allowed seat.</p></div>
    <div class="k-team-c"><span class="k-avatar">JK</span><h3>Jun Kato</h3><p class="r">Engineering</p><p class="b">Wrote the QR encoder from the spec, for fun, correctly.</p></div>
    <div class="k-team-c"><span class="k-avatar">TP</span><h3>Tomas Park</h3><p class="r">Engineering</p><p class="b">Keeps the check honest. Deletes more than he adds.</p></div>
    <div class="k-team-c"><span class="k-avatar">IN</span><h3>Ines Novak</h3><p class="r">Documentation</p><p class="b">Wrote the usage notes people actually read.</p></div>
    <div class="k-team-c"><span class="k-avatar">OB</span><h3>Omar Haddad</h3><p class="r">Support</p><p class="b">Answers in under a day, in full sentences.</p></div>
</div>
/* KATA Block: Team Grid */
.k-team{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;font-family:var(--k-font);color:var(--k-ink)}
.k-team-c{border:1px solid var(--k-line);border-radius:14px;padding:20px;background:var(--k-bg)}
.k-team-c h3{font-size:15px;font-weight:650;margin:12px 0 2px}
.k-team-c .r{font-size:12px;font-weight:600;color:var(--k-accent-ink)}
.k-team-c .b{font-size:12.5px;line-height:1.7;color:var(--k-ink-2);margin-top:8px}
@media (max-width:720px){.k-team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.k-team{grid-template-columns:1fr}}

Installation

CLI

node kata-ui.mjs add team

Writes the block’s CSS into your project. Everything it is built from comes with it. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet, with the CSS of everything listed under “Built from” above.
  3. Copy the HTML where it belongs.

Usage

Avatars are the Avatar part with initials — swap in photographs by replacing the span with an img inside the same class. Six is the grid’s natural size; for four or eight, the columns adapt. Keep the one-line bios specific: "Runs the night shift" beats "Passionate innovator" everywhere on Earth.

Previous
Stat Cards