sigilUI

Team Section

Team member grid with avatar, name, role, and social links.

@sigil-ui/componentsReact

Preview

Live preview Interactive

Import

import { TeamSection } from "@sigil-ui/components";

Usage

<TeamSection
  label="Team"
  title="Our team"
  members={[
    { name: "Alice Chen", role: "CEO", avatar: "/team/alice.jpg" },
    { name: "Bob Park", role: "CTO", links: [{ label: "GitHub", href: "https://github.com/bob" }] },
    { name: "Carol Lin", role: "Design Lead" },
    { name: "Dave Kim", role: "Engineer" },
  ]}
/>

Three columns

<TeamSection
  title="Leadership"
  members={members}
  columns={3}
/>

Props

PropTypeDefaultDescription
labelstring—Uppercase mono label
titlestring"Our team"Section heading
descriptionstring—Supporting text
membersTeamMember[]requiredArray of { name, role, avatar?, links? }
columns3 | 44Grid column count
classNamestring—Additional CSS classes

Each links item is { label, href, icon? }. Without an icon, the label text is shown.

Plus all standard <section> HTML attributes.