With Contact
Team cards that pair each photo and role with an email or phone link. Lets visitors reach the right person directly from your about or contact page.
Team cards that pair each photo and role with an email or phone link. Lets visitors reach the right person directly from your about or contact page.
Search blocks by description or jump to a page.
With Contact is a team directory built around direct reachability. A centered heading and subtitle sit above a two-column card grid. Each card opens with a square portrait, a colored availability dot in the corner, the member's name and role, a short bio line, and an availability label. Below a divider, three contact rows list the email address, phone number, and office location with their matching icons. A row of social icon buttons sits at the bottom of every card.
Every piece of copy is independent: names, roles, bios, availability labels, and contact details are all plain strings you can swap freely. The grid holds as many cards as you add and reflows to a single column on smaller screens. The availability dot switches between green and yellow based on a status field, so you can reflect real schedules without layout changes.
Reach for this block when visitors need to know who to call, not just who works there. It fits the contact or about page of a fintech or banking product where clients want to reach a specific relationship manager, compliance officer, or account lead by name rather than filling a generic form. Compared to a plain card grid, the contact rows and availability signal remove the extra step of digging through a separate directory.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Each card is a self-contained contact record. A few ways to fill them:
Tip: keep the bio line to one short sentence focused on what that person can help with, so visitors decide quickly who to contact.