Profile card

One member on a card: initials, a name and role, three labelled figures, and a link to their profile.

Use to introduce one person with labelled statistics and a clear destination for their full profile.

Build with the LoamUI skill

Already added the LoamUI skill? Copy the prompt below. Your agent will check your project and help complete any missing setup before building.

Prompt

Use the LoamUI skill to build the “Profile card” recipe for my application.

Add your content or describe what you want to change. New to the skill? Add it to your project.

TSX

import { useId } from "react";import { Avatar, Card, SignpostLink } from "@loamui/core";import "./recipe.css";
export default function Recipe() {  const name = useId();  return (    <Card render={<article className="profile-card" aria-labelledby={name} />}>      <div className="body">        <Avatar.Root aria-hidden>          <Avatar.Fallback>IH</Avatar.Fallback>        </Avatar.Root>        <h2 id={name}>Imogen Hartley</h2>        <p className="role">Steward, Lower Field plot</p>        <dl className="stats">          <div>            <dt>Varieties saved</dt>            <dd>38</dd>          </div>          <div>            <dt>Seasons</dt>            <dd>7</dd>          </div>          <div>            <dt>Followers</dt>            <dd>212</dd>          </div>        </dl>        <div className="actions">          <SignpostLink href="/growers/imogen-hartley">Meet Imogen</SignpostLink>        </div>      </div>    </Card>  );}

CSS

@scope (.profile-card) to ([class*="loam-"]) {  @layer loamui.components {    :scope {      --loam-avatar-size: 5rem;
      container-type: inline-size;      inline-size: min(100%, 20rem);    }
    div.body {      display: block grid;      font-size: var(--loam-text-md);      gap: var(--loam-space-3xs);      grid-template-columns: minmax(0, 1fr);      justify-items: center;      overflow-wrap: anywhere;      text-align: center;    }
    h2 {      font-size: var(--loam-text-xl);      margin-block: var(--loam-space-2xs) 0;    }
    p.role {      color: var(--loam-color-fg-muted);      font-size: var(--loam-text-sm);      margin-block: 0;    }
    dl.stats {      display: block grid;      gap: var(--loam-space-2xs);      grid-template-columns: repeat(auto-fit, minmax(min(100%, 5rem), 1fr));      inline-size: 100%;      margin-block: var(--loam-space-xs) var(--loam-space-2xs);
      div {        align-content: start;        display: block grid;        gap: calc(var(--loam-space-3xs) / 2);        grid-template-columns: minmax(0, 1fr);      }
      dt {        color: var(--loam-color-fg-muted);        font-size: var(--loam-text-xs);        order: 1;      }
      dd {        color: var(--loam-color-fg-strong);        font-family: var(--loam-font-display);        font-size: var(--loam-text-lg);        font-variant-numeric: lining-nums tabular-nums;        font-weight: 700;        line-height: 1.1;        margin-block: 0;      }    }
    div.actions {      display: block grid;      grid-template-columns: minmax(0, 1fr);      inline-size: 100%;    }  }}

Use this recipe

Copy Recipe.tsx and recipe.css side by side into a React 19 project. Install @loamui/core and load the core stylesheet at your application root, as shown in the installation guide. The component imports its own stylesheet.

Replace the sample person, figures and profile destination with application data. The link navigates to the profile; there is no simulated account relationship or persistence. If this card appears below a section heading, adjust its heading level accordingly.

Uses

Design decisions

How this recipe answers the two pillars, and how it composes the primitives. These notes explain the design. The included tests cover structure and selected interactions; check contrast, keyboard behaviour and assistive technology support in your application.

Modern: The card is an article named by its heading, and the figures are a description list of three pairs, so the markup reads label then value while the screen shows value over label. A local inline-size container resolves the body’s fluid tokens, the statistics use an intrinsic grid that can wrap as available space changes, and the Avatar size comes from the public --loam-avatar-size hook. A profile has no status meaning, so it keeps the neutral surface and ordinary link treatment rather than inventing a primary or success region.
Accessible: The Avatar is hidden because the name is printed beneath it, so a screen reader hears the person once; the figures carry their labels in the markup, not in a tooltip.
Composition: Card is the surface, rendered as the article; the example arranges the column inside it and never touches the Card's own border, radius or padding.