Skip to the page
TACTILE UI

Kit part · Avatars · Cards & panels · Profile cards

Profile card

A person’s ID plate: their coin set in a countersunk socket, name and role, a rating plate of facts engraved in tabular figures, and one key to act. Compact for one line.

Element
<article>
Needs
kit.css
Rules
profile-card.rules.md · 5
Finishes
Aluminium · Graphite · Porcelain · Black
Volumes
Tactile · Quiet
On this page
  1. Variants
  2. Every state, at once
  3. API
  4. Markup
  5. Accessibility
  6. How it’s built
  7. Rules
  8. Related parts
01

Variants

AO

Ada Okafor

Sound engineer · Studio A

In a session until 16:00

Sessions
128
Rating
4.9/ 5
Local time
14:20CET
Since
2019
Full · the card is the panel
TR

Tom Reyes

Producer

Compact · one line
JI

Jun Ito

Session drums

Back on Monday

Sessions
41
Kits
3
Initials, offline
02

Every state, at once

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

Aluminium

PartRestKey hoverKey downKey focus
Compact
TR

Tom Reyes

Producer

TR

Tom Reyes

Producer

TR

Tom Reyes

Producer

TR

Tom Reyes

Producer

Invited
MH

Mira Hale

Mastering

MH

Mira Hale

Mastering

MH

Mira Hale

Mastering

MH

Mira Hale

Mastering

Graphite

PartRestKey hoverKey downKey focus
Compact
TR

Tom Reyes

Producer

TR

Tom Reyes

Producer

TR

Tom Reyes

Producer

TR

Tom Reyes

Producer

Invited
MH

Mira Hale

Mastering

MH

Mira Hale

Mastering

MH

Mira Hale

Mastering

MH

Mira Hale

Mastering

03

API

NameKindValuesWhat it does
.tui-profile-cardclasson <article>The card. With .tui-panel it is a full plate, up to 360px wide.
aria-labelledbyattributethe name’s idNames the article by the person’s name, so a list of cards reads as a list of people.
.tui-profile-card__whoclass—The coin and the words beside it.
.tui-profile-card__socketclassaround .tui-avatarA round recess the coin sits in; its shadow falls into it.
.tui-profile-card__nameclasson <h2>–<h4>The name, 20px bold; 13.5px in the compact card.
.tui-profile-card__roleclasson <p>What they do and where, in secondary ink.
.tui-statusclassoptionalA lamp and a sentence under the role: where they are right now.
.tui-profile-card__plateclasson <dl>The rating plate: facts two by two in a recess, hairlines between. Wrap each dt/dd pair in a <div>.
dd smallelementunitThe unit, half-weight beside the value: “14:20 CET”, “4.9 / 5”.
.tui-profile-card__actionsclass—The key row. One contrast key on a full card, stretched to the width.
.tui-profile-card--compactclass—One line: coin, name and role, one small key. Not a panel itself.
@containerCSS≤ 260pxUnder 260px the coin moves above the name.
04

Markup

<article class="tui-panel tui-profile-card" aria-labelledby="p-ada">
  <div class="tui-profile-card__who">
    <span class="tui-profile-card__socket">
      <span class="tui-avatar tui-avatar--xl" role="img" aria-label="Ada Okafor, online">
        <span class="tui-avatar__mark">AO</span><img src="ada.jpg" alt=""><span class="tui-lamp" data-on></span>
      </span>
    </span>
    <div>
      <h3 class="tui-profile-card__name" id="p-ada">Ada Okafor</h3>
      <p class="tui-profile-card__role">Sound engineer · Studio A</p>
      <p class="tui-status"><span class="tui-lamp" data-on></span>In a session until 16:00</p>
    </div>
  </div>
  <dl class="tui-profile-card__plate">
    <div><dt>Sessions</dt><dd>128</dd></div>
    <div><dt>Rating</dt><dd>4.9<small>/ 5</small></dd></div>
    <div><dt>Local time</dt><dd>14:20<small>CET</small></dd></div>
    <div><dt>Since</dt><dd>2019</dd></div>
  </dl>
  <div class="tui-profile-card__actions">
    <button class="tui-key tui-key--primary">Book Ada for a session</button>
  </div>
</article>

<!-- Compact: one line, one small key. -->
<article class="tui-profile-card tui-profile-card--compact" aria-labelledby="p-tom">
  <div class="tui-profile-card__who">
    <span class="tui-profile-card__socket"><span class="tui-avatar" role="img" aria-label="Tom Reyes"><span class="tui-avatar__mark">TR</span></span></span>
    <div><h3 class="tui-profile-card__name" id="p-tom">Tom Reyes</h3><p class="tui-profile-card__role">Producer</p></div>
  </div>
  <div class="tui-profile-card__actions"><button class="tui-key tui-key--sm">Invite</button></div>
</article>

Needs kit.css only, no script. How to install the kit.

05

Accessibility

  • Each card is an <article> labelled by its heading, so a screen reader lists “Ada Okafor, article” and can jump between people.
  • The facts are a description list: “Sessions, 128”. Units are real text in <small>, read after the value.
  • The coin names itself and its status (“Ada Okafor, online”); the status line under the role says it in words as well.
  • Keys that latch (“Invite”) use aria-pressed; their lamp is a second signal.
06

How it’s built

No script. The card is a .tui-panel with a grid inside. The socket is the kit’s recess, round, 5px wider than the coin, so the coin’s raised shadow lands on the socket floor: a coin pressed into a cut-out. The plate is a second recess: a two-column grid of dt/dd pairs split by hairlines, each value set in tabular figures with a one-pixel --tui-hl shadow under it, the lit lower lip of an engraving. A container query moves the coin above the name when the card is narrow.

07

Rules

profile-card.rules.mdIn the brain

A handful of facts, never a CV; and the one key says who it acts on.

5 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.

See the Founder PassHow agents use the brain
08
AOTRMH+4

Avatar

A person’s mark, struck like a coin: initials stamped into the field, or a photo set under the rim, with a status lamp mounted at five o’clock. Stacks into a group with a count.

Output

Panel

A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.

Weight
2.4 kg
Power
18 W

Spec list

Key and value facts, printed like the plate on the back of a device.

Docs
Finish
Volume