[Library] Team

Catalogue accessStandard

Team grid

Six people across two even rows, each introduced by a monogram plate instead of a photograph: initials set at display size inside a currentColor rule, with the name and role beneath. Needs no image pipeline and cannot show a broken avatar. States no colour and no font of its own.

View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A people section built as two even rows of three cards, with a two-part introduction above them: an eyebrow and a display heading on the left, a supporting paragraph on the right. Core blocks only, and no image blocks at all, so there is nothing to upload and nothing to keep in sync.

The signature moment

Monograms instead of photographs

Each person is introduced by a monogram plate: their initials set at display size, centred, inside a one-pixel currentColor rule that spans the full width of the card. The plate does the job a headshot normally does. It establishes the grid, it gives each card a fixed visual anchor, and it is set in the buyer's own typeface, so a team section written this way looks native rather than stocked.

The plate is a structural mark, not decoration, which is why it is drawn in currentColor rather than an accent. It follows the theme's text colour wherever the theme puts it, including in a dark style variation, and it cannot resolve to nothing.

What this buys the buyer is the failure mode it removes. A photographic team section needs six portraits shot to one crop, hosted, kept current when somebody leaves, and it degrades into six grey placeholder boxes the day one file is missing. A monogram cannot 404, cannot be the wrong aspect ratio, cannot be lower resolution than its neighbour, and takes two characters of copy to change.

What it inherits from your theme

  • Typeface. The pattern states no font family anywhere. The monograms in particular are pure type, so they arrive in your serif or your sans and the section changes character with the theme rather than fighting it.
  • Palette. The ground is your base, and every piece of text is your contrast. Both are fallback chains ending on a colour WordPress itself guarantees, so the section paints in a theme with a full palette and still paints in a theme with none.
  • Spacing scale. Section padding, the gutters between cards, the gap between the two rows and the padding inside each monogram plate are all core spacing presets, so the density moves with your theme's own rhythm.
  • The rules. Every plate border is currentColor, so it is never a colour we chose.

What it decides for itself

  • The grid, and it is guaranteed rather than reasoned about. Two separate core/columns rows of three columns each, not one wrapping flex row. Core gives .wp-block-column flex-grow:1; flex-basis:0; min-width:0, so three columns never wrap above 782px, and core stacks them one per line below it. That means three across at 1280 and at 820, one per line at 390, with no possibility of a short final line thrown to opposite edges.
  • Proportion. The monogram is deliberately larger than the name below it. The card reads plate, then name, then role, then one line of copy, in descending scale, so the eye lands on the same place in every card.
  • Every measure is bounded by something that travels with the content. The introduction is a two-column row rather than a centred block, so the supporting paragraph is held by its own 42% column. The closing note has no column to sit in, so it carries padding-right: max(0rem, 100% - 32rem) instead: the percentage resolves against the band's own content box, which caps the note at a 32rem line regardless of how wide the band gets. Neither bound is derived from the viewport. A vw measure agrees with you in the theme you tested and runs to 176 characters in the one you did not, which is exactly what this note did before it was bounded.
  • The section opens and closes on the same left edge. The eyebrow, the heading and the closing note all start at the band's left edge, and the note is set to a reading measure rather than to the full width of the grid above it, so it reads as a footnote to the section instead of a second lede.
  • No links. Nothing in the section is tappable, on purpose: an inline link's height comes from the font's em box, which cannot be raised to a 44px target from a pattern that states no font. Adding one is a decision for the buyer, who knows their own type.

What you change first

  1. The people. Six names, six pairs of initials, six roles, six sentences. The initials are the only place two characters matter: three will still set, but the plate stops reading as a monogram and starts reading as a label.
  2. The count. Rows are independent, so add or delete a whole core/columns row to move in threes. If you want four across, add a fourth column to each row and step the monogram size down one notch, because four columns at 820px leave roughly 175px per card.
  3. The bio line. Delete the last paragraph in each card and the section becomes a compact directory rather than a profile grid. Nothing else needs to change.
  4. The plate. Its vertical padding is the thing that decides whether the monogram reads as a tile or as a nameplate. Raise it and the cards get taller and quieter; drop it and the section tightens into a list.
Display type18 words

Off the theme's ladder on purpose, because the size is the composition:

  • paragraph at clamp(2.75rem, 5vw, 4rem)
Back to the library

Continue exploring

Next in Team

Explore all 3 Team patterns