App category cards with illustrated portrait avatars
App category section for wellness, health, and consumer app landing pages with three illustrated portrait cards, short descriptions, and pill category links with an orange dot icon. Paste into Bolt, Claude Code, Replit, or Lovable.
About this vibe coding template
An application category section for wellness and consumer health platforms. The outer section uses a warm cream background with generous top and bottom padding. A centered header block holds a small grey eyebrow label and a short one-line headline. Below, three cards sit in a three-column grid. Each card has a portrait illustration at the top rendered entirely in CSS — a head shape, a body shape, and a gradient background that together suggest a person without any image file. Each portrait uses a different color palette to differentiate the three user types: a light warm man, a dark-haired woman, and a blonde person with a purple-toned background. Below the portrait, a short description paragraph and a pill-style link with a small orange circle icon act as the category CTA. Cards use a very large border-radius, a warm off-white background, and a soft box-shadow for a rounded card appearance.
Common questions about this template
How do I change the portrait colors?
Ask your vibe coding tool to update the background gradient on the .man, .woman, or .blonde elements, and the background on their nested i and b pseudo-elements. The i element is the head shape and b is the body. Change the gradient stops to any skin tone or hair color that represents your user segments.
How do I add a fourth card?
Ask Bolt, Claude Code, Replit, or Lovable to add a fourth article element inside the .ag grid and update the grid-template-columns on .ag from repeat(3,1fr) to repeat(4,1fr). Copy the structure of an existing card and update the portrait class, description text, and category link label.
How do I change the orange icon on each card link?
Ask your vibe coding tool to update the background color on the .ag a i element. The default orange is #ff9e31. Replace it with your brand accent color. The circle icon is a CSS-only element — no SVG or image required.
Use this AI coding template for
- ·Wellness and health app landing pages with multiple user segments shown as illustrated card categories
- ·Consumer health platform pages where illustrating different user types adds warmth without photography
- ·App product pages that need a card-based application selector with a soft editorial feel