People module
Team Member block
A person’s photo, name, role, short bio and social links — stacked, side by side, or with the name over the photo.
Overview
Team Member introduces one person. Type the name, role and bio straight into the block, pick a photo, and add links to their profiles. Put several in a Container or Columns block to build a team section.
At a glance
- Block name
wpbb/team-member- Module
- People
- Find it by searching
- Team Member
- Loads JavaScript on the site
- No
When and why to use it
- “Meet the team” and “About us” sections.
- Speakers, hosts, instructors or authors.
- A single contact person on a service page.
Example scenarios
- Agency team grid: four Team Members in a 4-column Container, Photo above, Card, with LinkedIn and Email links.
- Event speakers: Name over photo, square 1:1 photos, no bio.
How to add the Team Member block
- Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
- Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
- Search for the block. Type Team Member in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
- Insert it. Click Team Member in the results. The block appears with a photo area and fields for the name, role and bio.
- Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
- Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
- Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.
Content settings
You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.
On the block (in the editor canvas)
Photo
- What it does
- The person’s picture.
- What to enter or choose
- Any image from the Media Library or a new upload.
- Default
- Empty
- How to use it
- Click the button to open the Media Library, then upload a new file or pick an existing one and click “Select”.
- When to use it
- Almost always.
- Example
- A head-and-shoulders portrait.
- Result
- Cropped to the chosen shape and aspect ratio.
- Good to know
- Change it with Replace in the block toolbar.
Name
- What it does
- The person’s name.
- What to enter or choose
- Text; bold and italic allowed.
- Default
- Empty
- How to use it
- Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
- When to use it
- Always.
- Example
- “Sam Lee”.
- Result
- Shown in the chosen Name tag.
Role
- What it does
- Job title or role.
- What to enter or choose
- Short text.
- Default
- Empty
- How to use it
- Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
- When to use it
- Usually.
- Example
- “Head of Design”.
- Result
- Coral text under the name. Empty roles are hidden.
Bio
- What it does
- A sentence or two about them.
- What to enter or choose
- Text; links and formatting allowed.
- Default
- Empty
- How to use it
- Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
- When to use it
- Optional.
- Example
- “Sam has led our design team since 2019.”
- Result
- Grey text under the role. Empty bios are hidden.
Block toolbar
Align
- What it does
- Aligns the text and social icons.
- What to enter or choose
- One of: Align left, Align center.
- Default
- Align center
- How to use it
- Select the block; the button is in the toolbar that appears above it.
- Example
- Centre for Photo above.
- Result
- The content moves.
Settings panel: Layout
Layout
- What it does
- Where the text sits relative to the photo.
- What to enter or choose
- One of: Photo above, Photo beside, Name over photo.
- Default
- Photo above
- How to use it
- Open the dropdown and pick an option.
- When to use it
- Photo above for grids, Photo beside for one or two wide cards, Name over photo for bold visual tiles.
- Example
- Photo above.
- Result
- Photo beside stacks on phones. Name over photo uses a dark gradient so the text stays readable.
Box
- What it does
- The box look.
- What to enter or choose
- One of: Card, Tint, Plain.
- Default
- Card
- How to use it
- Click one of the buttons in the group.
- When to use it
- Always optional.
- Example
- Card.
- Result
- Card has a border and a shadow on hover; Plain has no box.
Name tag
- What it does
- The HTML element of the name.
- What to enter or choose
- One of: H2, H3, H4, H5, H6, P.
- Default
- H3
- How to use it
- Open the dropdown and pick an option.
- When to use it
- To keep the page’s heading order logical.
- Example
- H3 under an H2 “Our team” heading.
- Result
- Looks the same; changes the document outline.
Settings panel: Photo
ShapeShown when Layout is not Name over photo
- What it does
- A rectangular photo or a round portrait.
- What to enter or choose
- One of: Rectangle, Circle.
- Default
- Rectangle
- How to use it
- Click one of the buttons in the group.
- When to use it
- Always optional.
- Example
- Circle for a friendlier look.
- Result
- Circle photos are square-cropped and sit inside the card.
Aspect ratioShown when Shape is Rectangle
- What it does
- The photo’s proportions.
- What to enter or choose
- One of: 1:1, 4:5, 3:4, 4:3.
- Default
- 4:5
- How to use it
- Open the dropdown and pick an option.
- When to use it
- Use the same ratio for every member so the cards line up.
- Example
- 4:5, a classic portrait.
- Result
- The photo is cropped to fit.
Alternative text
- What it does
- Describes the photo for screen readers and search engines.
- What to enter or choose
- Short text.
- Default
- Empty
- How to use it
- Type into the box. Line breaks are kept where the block allows them.
- When to use it
- Always, unless the name already says everything.
- Example
- “Portrait of Sam Lee”.
- Result
- Used as the image’s alt text.
Resolution
- What it does
- Which image size is loaded.
- What to enter or choose
- Your site’s image sizes (Thumbnail, Medium, Large, Full…).
- Default
- large
- How to use it
- Open the dropdown and pick an option.
- When to use it
- Medium is enough for small cards.
- Example
- Large.
- Result
- Smaller sizes load faster.
Settings panel: Social links
One entry per profile. Style controls appear once a network is added.
Network
- What it does
- Which site the link goes to; sets the icon and, in the Brand style, the colour.
- What to enter or choose
- 28 networks, from Facebook, X, Instagram and LinkedIn to GitHub, WhatsApp, Email, RSS and Website.
- Default
- None selected
- How to use it
- Each item is a collapsible row. Click it to open its fields; use the arrows to reorder, the bin to delete and “Add” to create a new one.
- When to use it
- One entry per profile. Add network adds another.
- Example
- LinkedIn.
- Result
- An icon in the list.
Profile link / Email address
- What it does
- Where the icon leads.
- What to enter or choose
- A full address (https://…). For Email, just the address — it becomes a mailto: link.
- How to use it
- Paste a full address, including https://.
- When to use it
- Always — networks without a link are not shown on the site (they are dimmed in the editor).
- Example
https://www.linkedin.com/in/sam-lee.- Result
- The icon becomes a link.
Name (optional)
- What it does
- The name read by screen readers and shown when names are on.
- What to enter or choose
- Text, or empty for the network’s name.
- How to use it
- Type into the text field. Changes appear in the preview right away.
- When to use it
- Optional.
- Example
- “Sam on LinkedIn”.
- Result
- Replaces the default name.
Style
- What it does
- The look of the icons.
- What to enter or choose
- One of: Brand, Dark, Tint, Outline, Plain.
- Default
- Tint
- How to use it
- Click one of the buttons in the group.
- When to use it
- Always optional.
- Example
- Tint.
- Result
- Brand uses each network’s own colour; Plain shows icons without a badge.
ShapeShown when Style is not Plain
- What it does
- The badge shape.
- What to enter or choose
- One of: Circle, Rounded, Square.
- Default
- Circle
- How to use it
- Click one of the buttons in the group.
- When to use it
- Always optional.
- Example
- Circle.
- Result
- The badge corners change.
Icon size (px)
- What it does
- Icon size; the badge is twice as big.
- What to enter or choose
- A number from 12 to 32 (px).
- Default
- 16 px
- How to use it
- Drag the slider, or type a number in the box next to it.
- When to use it
- Always optional.
- Example
- 16.
- Result
- Bigger or smaller icons.
Open in new tab
- What it does
- Opens profiles in a new tab.
- What to enter or choose
- On or off.
- Default
- On
- How to use it
- Click the switch to turn it on (blue) or off.
- When to use it
- Usually on for social sites.
- Example
- On.
- Result
- Screen readers hear “(opens in a new tab)”. Email links always open the mail app.
Design & styling
Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:
- Element — which part of the block to style.
- State — Normal, or a state such as Hover (only the states the part supports are offered).
- Device — Desktop, Tablet or Mobile, for values that can differ per screen size.
Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Team Member offers.
Element: Name selected first
The name.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Typography | Font family | — | Normal |
| Font size | Yes | Normal | |
| Weight | — | Normal | |
| Style | — | Normal | |
| Line height | Yes | Normal | |
| Letter spacing | Yes | Normal | |
| Letter case | — | Normal | |
| Alignment | Yes | Normal | |
| Decoration | — | Normal | |
| Colors | Text | — | Normal |
States: Normal only.
Element: Card
The card.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Background | Type | — | Normal, Hover |
| Color / Gradient | — | Normal, Hover | |
| Image | — | Normal | |
| Border | Border type | — | Normal, Hover |
| Border | — | Normal, Hover | |
| Radius | Yes | Normal | |
| Box Shadow | Remove shadow | — | Normal, Hover |
| Shadow layers | — | Normal, Hover | |
| Spacing | Margin | Yes | Normal |
| Padding | Yes | Normal | |
| Sizing | Width | Yes | Normal |
| Max width | Yes | Normal | |
| Height | Yes | Normal | |
| Min width / Min height / Max height | Yes | Normal | |
| Block alignment | Yes | Normal | |
| Position | Position | Yes | Normal |
| Top / Right / Bottom / Left | Yes | Normal | |
| Z-index | Yes | Normal | |
| Overflow | Yes | Normal | |
| Transform | Move X / Move Y | — | Normal, Hover |
| Scale X / Scale Y | — | Normal, Hover | |
| Rotate (°), Rotate X (°), Rotate Y (°) | — | Normal, Hover | |
| Skew X (°) / Skew Y (°) | — | Normal, Hover | |
| Effects | Opacity (%) | Yes | Normal, Hover |
| State transition (ms) | — | Normal | |
| Timing | — | Normal | |
| Visibility | Show on Desktop / Tablet / Mobile | — | Normal |
States for this part:
- Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Element: Photo
The photo.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Border | Border type | — | Normal |
| Border | — | Normal | |
| Radius | Yes | Normal | |
| Box Shadow | Remove shadow | — | Normal |
| Shadow layers | — | Normal | |
| Sizing | Width | Yes | Normal |
| Max width | Yes | Normal | |
| Height | Yes | Normal | |
| Min width / Min height / Max height | Yes | Normal |
States: Normal only.
Element: Content area
The area holding the text.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Background | Type | — | Normal |
| Color / Gradient | — | Normal | |
| Image | — | Normal | |
| Spacing | Padding | Yes | Normal |
States: Normal only.
Element: Role
The role.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Typography | Font family | — | Normal |
| Font size | Yes | Normal | |
| Weight | — | Normal | |
| Style | — | Normal | |
| Line height | Yes | Normal | |
| Letter spacing | Yes | Normal | |
| Letter case | — | Normal | |
| Alignment | Yes | Normal | |
| Decoration | — | Normal | |
| Colors | Text | — | Normal |
States: Normal only.
Element: Bio
The bio.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Typography | Font family | — | Normal |
| Font size | Yes | Normal | |
| Weight | — | Normal | |
| Style | — | Normal | |
| Line height | Yes | Normal | |
| Letter spacing | Yes | Normal | |
| Letter case | — | Normal | |
| Alignment | Yes | Normal | |
| Decoration | — | Normal | |
| Colors | Text | — | Normal |
States: Normal only.
Element: Social icons
The social icon badges. Hover and Focus states.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Typography | Font family | — | Normal |
| Font size | Yes | Normal | |
| Weight | — | Normal | |
| Style | — | Normal | |
| Line height | Yes | Normal | |
| Letter spacing | Yes | Normal | |
| Letter case | — | Normal | |
| Alignment | Yes | Normal | |
| Decoration | — | Normal, Hover, Focus | |
| Colors | Text | — | Normal, Hover, Focus |
| Background | Type | — | Normal, Hover, Focus |
| Color / Gradient | — | Normal, Hover, Focus | |
| Image | — | Normal | |
| Border | Border type | — | Normal, Hover, Focus |
| Border | — | Normal, Hover, Focus | |
| Radius | Yes | Normal | |
| Focus indicator | — | Focus | |
| Box Shadow | Remove shadow | — | Normal, Hover, Focus |
| Shadow layers | — | Normal, Hover, Focus | |
| Spacing | Padding | Yes | Normal |
| Sizing | Width | Yes | Normal |
| Max width | Yes | Normal | |
| Height | Yes | Normal | |
| Min width / Min height / Max height | Yes | Normal | |
| Effects | Opacity (%) | Yes | Normal, Hover, Focus |
States for this part:
- Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
- Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.
Responsive settings
Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.
In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Font size, Line height, Letter spacing, Alignment, Radius, Margin, Padding, Width, Max width, Height, Min width / Min height / Max height, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Opacity (%).
The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.
Advanced options
- HTML anchor (Advanced section of the Settings tab) — a unique name such as
pricing, so you can link straight to this block with#pricingat the end of the page address (for example from a menu). - Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
- Custom attributes (Advanced section) — add
data-*,title,aria-label,aria-describedby,langordirattributes. See Custom attributes. - State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
How it works on your site
A card with the photo, the name in the chosen heading tag, the role, the bio and a list of profile links. Each link has an accessible name such as “LinkedIn (opens in a new tab)” and rel="me". No JavaScript.
Limitations and notes
- One person per block — add more blocks for a team.
- Networks without a link are skipped on the site.
Troubleshooting
A social icon is missing on the site.
That network has no link yet. Add its address in Social links.