Profile card
A profile at a glance — a portrait, a name, a headline gauge, a few stats with their values in words, a line and actions: a creator, a match, a member, a plan.
Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.
When to use
- A creator's card in a directory or beside their content (profile completeness, challenges met, response time).
- A match in a dating app: what two people share, said in words.
- A team member, a product, a plan presented with a few measured strengths — and, on a told page, a character (
variant="arcade").
When not to use
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { ProfileCard, StatGauge } from "@krizaka/ui/profile-card";Examples
A creator
A creator's card: profile completeness, two stats in words, follow and message.
Elena Marchetti
Dance and street fashion · Montréal
A match
In a dating app's brand: what two people share, never a score alone.
Alex, 29
You both answered “a slow Sunday market” first.
Arcade flavour
The fighter card of a told page: the brand's gradient, a breathing aura, a skewed gauge.
Mirror clan
ōrāre + zaka
Props
ProfileCard
A profile at a glance: portrait, name, a headline gauge, stats with their values in words, a line and actions.
| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | ReactNode | — | The name (the card's heading). |
visualrequired | ReactNode | — | The portrait: an image, an avatar, a mark. Decorative — the name carries the meaning. |
brand | string | — | A brand scope (orochia → .brand-orochia): the accent and gradient become that brand's. |
caption | ReactNode | — | One line under the gauges: where they come from, what they do. |
figure | ReactNode | — | What shows as the headline figure instead of valueText: a NumberTicker that climbs. Decorative. |
icon | ReactNode | — | A small glyph before the name (decorative): a verified mark, an emblem. |
nameAs | "h2" | "h3" | "h4" | "p" | h3 | The level of the name. |
statLabel | string | — | The headline gauge's label (“Profile complete”, arcade “Power”); without it, no headline gauge. |
stats | readonly ProfileStat[] | — | More gauges under the headline one: two to four, each with its value in words. |
value | number | 100 | The headline gauge's value, 0–100. |
valueText | string | — | The headline value in words; default: the percentage. |
variant | StoryVariant | default | default: a sober card. arcade: the fighter card — the brand's light, a ring and a breathing aura, a skewed gauge. |
visualSize | number | 132 (arcade 196) | The diameter of the portrait, in pixels. |
StatGauge
A measured strength: label, figure and bar; role="meter" with aria-valuetext.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | What it measures (“Profile complete”, “Creator share”) — passed translated; the meter's accessible name. |
figure | ReactNode | — | What shows as the figure instead of valueText: a NumberTicker that climbs, a formatted amount. Decorative. |
hideLabel | boolean | false | Hides the label and the figure (the bar alone, named for assistive technology). |
max | number | 100 | The top of the range. |
value | number | 100 | The value, between 0 and max. |
valueText | string | — | The value in words (“12 of 15”); default: the percentage. Read by assistive technology, shown without figure. |
Accessibility
- An
articleheaded by the name; each gauge is ameternamed by its label, witharia-valuetext. - The portrait is decorative: the name carries the meaning.
- In a stage, the card arrives and its gauges fill once; under
prefers-reduced-motionthey are drawn full at once.
Best practices
- Two to four stats, each with
valueTextin the person's words (“12 of 15”, “replies within a day”): a bar alone says nothing. - Never reduce a person to a score: in a dating or social product, show what is shared, not a ranking.
- One or two actions under the card, the main one first.
nameAsfollows the page's outline:h3in a list under anh2,pwhen a heading follows the card.
Related components
Generated from the code of @krizaka/ui 2.9.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Number ticker
A figure that climbs into view once, or rolls digit by digit to each new value — server-rendered at its final value, its width held from the first paint, read once by assistive technology.
Promise card
A promise, the keys that call it and who carries it: a product's guarantee with its bird, a shortcut and what it does — a calm card with key-caps by default, a combo card whose keys light one by one in the arcade flavour.