TechnicalCollectible prompt

Team grid with consistent portraits and short bios

A people section where every photo matches, missing photos look intended and bios stay accessible.

v0LovableCursor

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

Team grid with consistent portraits and short bios

Act as a designer and art director. Build a team grid for {{business_name}} in this style: {{visual_style}}, with brand colors {{brand_colors}}. Reuse existing image and card components. Portraits that match: - one crop for everyone: 4:5, eyes about 40% from the top, head and shoulders - one treatment for everyone: the same neutral background, or a duotone in the brand colors applied in CSS or at export - per-person object-position, so nobody's head gets cut off - write me a short photo brief (light, framing, background) for new hires - missing photo: an initials tile in a brand color, the same size and ratio, never a silhouette placeholder Each person: name 17 to 18px weight 600, role 14 to 15px in a muted token that passes 4.5:1, one human line ("Ask me about fermentation"), and optional links (email, LinkedIn) whose accessible names include the person ("Email Ana Ruiz"). A longer bio opens in place with a Read more button using aria-expanded, or in a dialog, not a flip card. Markup: a list of people, each an article with an h3; portraits with short alt text or empty alt since the name is right there; tell me which you chose. Layout: 360: 2 columns, gap 16px; 768: 3, gap 24px; 1280: 4, gap 32px. Teams over 12 people get h2 groups by department; 1 to 2 people get a wide feature row instead of a sparse grid. Order by team or alphabetically, unless I say otherwise. States: long names and titles wrap; links have hover, focus-visible and active; images lazy below the fold with width and height set. Motion: none, or a 200ms photo fade on load; none under prefers-reduced-motion. Avoid: AI-generated headshots, stock people, circular crops that cut off hair, grayscale-to-color hover gimmicks, flip cards.
Technicalnvoka.com/library/nvoka-team-grid-with-consistent-portraits-and-short-biosScan to open
Technical

Team grid with consistent portraits and short bios

A people section where every photo matches, missing photos look intended and bios stay accessible.

Nvoka logo

Curated by Nvoka

v0LovableCursor
Add to my library

Make it yours

Fill in the blanks and change any word. Only your copy changes, never the card.

Fill in the blanks

0 of 3 filled

Your prompt

Act as a designer and art director. Build a team grid for {{business_name}} in this style: {{visual_style}}, with brand colors {{brand_colors}}. Reuse existing image and card components. Portraits that match: - one crop for everyone: 4:5, eyes about 40% from the top, head and shoulders - one treatment for everyone: the same neutral background, or a duotone in the brand colors applied in CSS or at export - per-person object-position, so nobody's head gets cut off - write me a short photo brief (light, framing, background) for new hires - missing photo: an initials tile in a brand color, the same size and ratio, never a silhouette placeholder Each person: name 17 to 18px weight 600, role 14 to 15px in a muted token that passes 4.5:1, one human line ("Ask me about fermentation"), and optional links (email, LinkedIn) whose accessible names include the person ("Email Ana Ruiz"). A longer bio opens in place with a Read more button using aria-expanded, or in a dialog, not a flip card. Markup: a list of people, each an article with an h3; portraits with short alt text or empty alt since the name is right there; tell me which you chose. Layout: 360: 2 columns, gap 16px; 768: 3, gap 24px; 1280: 4, gap 32px. Teams over 12 people get h2 groups by department; 1 to 2 people get a wide feature row instead of a sparse grid. Order by team or alphabetically, unless I say otherwise. States: long names and titles wrap; links have hover, focus-visible and active; images lazy below the fold with width and height set. Motion: none, or a 200ms photo fade on load; none under prefers-reduced-motion. Avoid: AI-generated headshots, stock people, circular crops that cut off hair, grayscale-to-color hover gimmicks, flip cards.
See all