Team Member — every design
Photo position per device, hover photos, avatars and photo effects, name / role / bio styling, social profiles with brand colours, socials over the photo, a details button with a popup, card styles and two finished team layouts. Portraits are illustrated placeholders.
1. Photo position
Photo on top, left or right — per device. Side layouts stack on phones.
Maya Okafor
Shapes every collection from first sketch to final stitch.
Daniel Brandt
Runs the print floor and knows every machine by name.
Priya Raman
Answers your emails, usually before you have finished writing them.
2. Hover photo
A second photo swaps in on hover: cross-fade, slide up, zoom or wipe.
Maya Okafor
Hover: cross-fade.
Tom Whitfield
Hover: slide up.
Lena Kovač
Hover: zoom in.
Kofi Mensah
Hover: wipe from the left.
3. Photo styles
Avatar sizes, round photos, frames, shadows, filters and a zoom on hover.
Maya Okafor
Round avatar, 140px.
Daniel Brandt
Ringed avatar with a glow.
Priya Raman
Inset photo with rounded corners.
Tom Whitfield
Grayscale, colour and zoom on hover.
4. Name, role and bio
Typography and colours per part, a divider, alignment and hover colours.
Lena Kovač
Left aligned with a divider.
Kofi Mensah
Bold name, uppercase role.
Maya Okafor
Hover: the card turns dark and text recolours.
Daniel Brandt
5. Social profiles
40+ networks plus email, phone, website and custom icons. Brand colours, per-item colours and hover motion.
Priya Raman
Brand colour backgrounds.
Tom Whitfield
Brand colour icons, grow on hover.
Lena Kovač
Email, phone, website and a custom icon; brand colour on hover.
Kofi Mensah
Per-item colours and square buttons.
6. Socials over the photo
The icons slide up over the photo when the card is hovered.
Maya Okafor
Daniel Brandt
Priya Raman
Tom Whitfield
7. Details button
A button that opens a link or a popup (native dialog, Esc and backdrop close). Before or after the socials.
Maya Okafor
Opens a popup with the photo and name repeated.
Priya Raman
Popup without the header, pale yellow, close on the left.
8. Card styles and hover
Lift, grow, an accent line, outline and dark cards.
Tom Whitfield
Lift.
Lena Kovač
Grow.
Kofi Mensah
Accent line in green.
Maya Okafor
A dark card.
9. Finished: meet the studio
Round avatars, left-aligned text and brand-colour icons on hover — the classic team grid.
Maya Okafor
Shapes every collection from first sketch to final stitch.
Daniel Brandt
Runs the print floor and knows every machine by name.
Priya Raman
Answers your emails, usually before you have finished writing them.
Tom Whitfield
Started the shop from a spare room in 2016.
Lena Kovač
Shoots every product on our roof, weather permitting.
Kofi Mensah
Keeps the store fast and the checkout painless.
10. Finished: leadership on dark
Side-by-side cards with a hover photo, a popup bio and socials — stacked on phones.
Tom Whitfield
Started the shop from a spare room in 2016.
Maya Okafor
Shapes every collection from first sketch to final stitch.