Start here
What you change first
Replace the example portraits with your own people, then edit names, roles and copy. Image blocks retain their aspect ratio when you replace a source.
The signature moment
Portrait card grid
The base pattern uses theme colour chains and states no font family. The product team roster colours variation keeps the same copy and structure, and states the Designed Pattern palette and a system font stack. All portraits are generated examples depicting nobody real.
Theme handoff
What comes from where
From your theme
The base uses the theme's base and contrast colour chains and typeface. Its body text targets 4.5:1 contrast and large display text 3:1. The stated variation carries its own paired backgrounds and text colours.
Full pattern notes
Why it works, and how it is built
Open a topic for the complete design reasoning, editing guidance and implementation notes.
Design rationaleComposition, intent and nearest alternatives
Overview
Four full-height portrait cards place name, role and a short biography on a separate plate below each face. A three-part introduction and closing team note frame the roster. Example portraits are included, generated and nobody real; replace them with your own people.
The signature moment: portrait card grid
The base pattern uses theme colour chains and states no font family. The product team roster colours variation keeps the same copy and structure, and states the Designed Pattern palette and a system font stack. All portraits are generated examples depicting nobody real.
Make it yoursVariations and the edits to make first
What you change first
Replace the example portraits with your own people, then edit names, roles and copy. Image blocks retain their aspect ratio when you replace a source.
Theme behaviourInheritance, fixed decisions and contrast
What it inherits from your theme
The base uses the theme's base and contrast colour chains and typeface. Its body text targets 4.5:1 contrast and large display text 3:1. The stated variation carries its own paired backgrounds and text colours.
Display type
The large heading uses a bare clamp because its size is part of the composition. Person names use the large rung, and body copy uses medium with clamp fallbacks. The stated variation uses a local font stack and ships no font file.
Technical notesBlock mechanics, responsive behaviour and constraints
What the buyer gets
A complete team section built from core WordPress blocks. Replace each photograph, name and description in the editor. Duplicate a whole person card to expand the team.
Responsive composition
The three-part header stacks on narrow screens. The card grid reduces columns by available width, keeping each photograph and caption together. Review at 1920, 1280, 820 and 390 pixels.
Included images
The public image URLs travel with the copied markup: https://patternpaste.com/previews/_assets/portrait-15.jpg, https://patternpaste.com/previews/_assets/portrait-02.jpg, https://patternpaste.com/previews/_assets/portrait-03.jpg, https://patternpaste.com/previews/_assets/portrait-04.jpg. Choose Replace to use your own photographs. Pasting a URL does not import a Media Library attachment. See image credits.
Questions
Product team roster: common questions
Does Product team roster need a plugin?
No. It is built only from core WordPress blocks (column, columns, group, heading, image and paragraph), so it pastes into the block editor with nothing to install.
Will Product team roster match my theme?
Choose by variation. Theme colours takes your theme’s palette; Product team roster colours brings its own colours.
How many variations does Product team roster have?
2: Theme colours and Product team roster colours. Each is its own markup; choose one in the toolbar above the preview before you copy.
Can I use my own images?
Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library.
Is Product team roster free?
It is included with a subscription, with every Core Pattern and variation. 50 Core Patterns are free to copy without one.
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…Variation: Product team roster colours
Fetching the markup…
