Hex UIv1

MarketingTeam

A team section: an optional heading block above a grid of member cards (avatar, name, role, optional bio + social links). Avatars and social links are ReactNode slots — no icon set is bundled. Presentational and theme-driven.

Installation

pnpm
pnpm dlx @hex-core/cli add marketing-team

Usage

tsx
import { MarketingTeam } from "@/components/ui/marketing-team"

Three team members with avatars

Heading block above three cards with avatar, name, role, and bio.

tsx
import { MarketingTeam, Avatar, AvatarImage, AvatarFallback } from "@hex-core/components";

<MarketingTeam
  title="Meet the team"
  description="The people building Hex."
  members={[
    {
      name: "Jordan Lee",
      role: "Head of Design",
      bio: "Design systems + AI-native UX.",
      avatar: <Avatar className="size-16"><AvatarImage src="/jordan.jpg" alt="" /><AvatarFallback>JL</AvatarFallback></Avatar>,
    },
  ]}
/>

Variant values

columnsCards per row on desktop.
ValueDescription
threedefault
Three across.
four
Four across.

API Reference

PropTypeDefaultDescription
membersrequired
object—ReadonlyArray<{ name; role; avatar?; bio?; social? }>. Team members in display order. Avatar is a ReactNode (Avatar / img) — none is bundled.
eyebrow
ReactNode—Section eyebrow above the title.
title
ReactNode—Section heading.
description
ReactNode—Section subcopy below the heading.
columns
enumthreeCards per row on ≥lg: 'three' or 'four'.
className
string—Additional classes applied to the root <section>.

AI Guidance

When to use

Use on About / Team pages or below the hero on a landing page to add credibility. Three columns reads as 'small team / founders'; four reads as 'scaled team'.

When not to use

Don't use for customer logos (use marketing-logo-cloud) or testimonials (use marketing-testimonial). Don't pad with placeholder members.

Common mistakes

  • Mixing avatar sizes — pick one size class (size-16, size-20) and apply consistently.
  • Putting links to every social network — pick 1–2 most relevant (LinkedIn / GitHub for tech, Twitter / IG for consumer).
  • Long bios — keep to 1–2 lines per member or the grid gets ragged.

Accessibility

Each card title renders as <h3> under the section <h2>. Decorative avatars use alt="" since the name is in adjacent text. Social-link icons must carry an accessible name (aria-label or sr-only text).

Token budget: 1007

Verified against @hex-core/components@1.14.0

Edit this page on GitHub