Search blocks by description or jump to a page.
Team cards that list each member with badges for their skills and tools. Great for agencies and studios that want to show real expertise at a glance.
With Skill Badges is a three-column grid of team member cards. Each card centres a circular portrait ringed with a subtle border, then stacks the person's name, role, and one-line bio below it. Beneath the bio a wrapping row of secondary badges lists the member's skills or tools, and a small row of ghost icon buttons for Twitter, GitHub, and LinkedIn closes out the card. A centred heading and subheading sit above the grid to introduce the section.
Every piece of the block is independent. You can swap the heading copy, add or remove team members, change the badge labels to reflect different skills, and drop any of the social buttons without affecting the rest of the layout. The grid naturally reflows to two columns on tablet and one column on mobile.
This layout works well on an about or company page where credentials matter as much as faces. For a project management workspace, where prospective customers want to know whether the people building the tool understand engineering, design, and product, the badge row communicates real expertise far faster than a plain bio paragraph. It outperforms a simple card grid when the team's specialisms need to be scannable at a glance, and it is lighter than the hover card variant when you want that information always visible rather than hidden behind an interaction.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Each card is self-contained, so you can tailor the content of any member without touching the others:
Tip: lead with the most distinctive or credibility-building skill in each member's badge list so visitors absorb the key expertise at first glance.