Library · Social Proof

TeamFeed3ColCardsWithDesc

Primary (olive) grid of staff bio cards — photo top, role + name + bio + profile link.

Figma: Team Feed / 3 col cards with desc ↗ View Elementor template in 8020 ↗
Live preview — edit theme bottom-right 
---
import TeamFeed3ColCardsWithDesc from "../components/figma/TeamFeed3ColCardsWithDesc.astro";

const members = [
  {
    name: "Jane Doe",
    role: "Sales Agent & Principal",
    bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    portrait: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=800&h=800&fit=crop",
    portraitAlt: "Jane Doe",
    profileUrl: "#jane-doe",
  },
  {
    name: "John Smith",
    role: "Sales Agent",
    bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    portrait: "https://images.unsplash.com/photo-1568602471122-7832951cc4c5?w=800&h=800&fit=crop",
    portraitAlt: "John Smith",
    profileUrl: "#john-smith",
  },
  {
    name: "Isabelle Doe",
    role: "Sales Agent",
    bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    portrait: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=800&h=800&fit=crop",
    portraitAlt: "Isabelle Doe",
    profileUrl: "#isabelle-doe",
  },
];
---
<TeamFeed3ColCardsWithDesc members={members} />

Props

NameTypeRequiredDescription
members TeamMember[] Yes Array of { name, role, bio?, portrait, portraitAlt?, profileUrl? }.

Example with all props

---
const members = [
  {
    name: "Jane Doe",
    role: "Sales Agent & Principal",
    bio: "Short biography copy.",
    portrait: "/images/jane.jpg",
    portraitAlt: "Jane Doe",
    profileUrl: "/team/jane-doe",
  },
];
---
<TeamFeed3ColCardsWithDesc members={members} />