Masonry Grid
A team showcase in a staggered masonry grid where photos vary in height. Fills the space naturally and suits a large, photo rich company roster.
A team showcase in a staggered masonry grid where photos vary in height. Fills the space naturally and suits a large, photo rich company roster.
Search blocks by description or jump to a page.
Masonry Grid opens with a centered heading and a short subtitle, then flows into a multi-column masonry layout where each team member occupies a card. Every card holds a photo sized to a distinct height so the columns fill unevenly and create a natural, staggered rhythm. On hover, a gradient rises from the bottom of the photo and reveals the member's name, role, a one-line bio, and a row of icon buttons linking to Twitter, GitHub, and LinkedIn.
The heading copy, subtitle, and all member data are independent, so you can rename people, swap photos, adjust how many cards appear, or reorder the roster without affecting the layout. The three social link buttons are present on every card and can be pointed at real profile URLs.
Reach for this block when your about page needs to feel visual and generous rather than tabular. An ecommerce storefront brand with a strong personality benefits from the varying card heights because the layout reads more like an editorial spread than a corporate directory. It suits a brand story page, a founders section, or an about page for a label, retailer, or direct-to-consumer company where faces and character matter as much as titles.
Compared to a uniform card grid, the staggered heights give each person more presence, and the hover reveal keeps the page uncluttered until a visitor is ready to read.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The obvious fit is a company roster for a brand, studio, or shop, one card per person, ordered however the story calls for. A few other ways to use the frame:
Tip: vary the photos so that tall and short images alternate across columns; the masonry rhythm only reads well when adjacent cards differ noticeably in height.