Domain

TeamSection

Marketing team roster section that renders profile cards with avatars, roles, and optional profile links.

import { TeamSection } from '@lostgradient/cinder/team-section';
marketingteamprofile
01

Overview

Renders a team roster section with avatars, roles, bios, and optional profile links.

Usage

svelte 
<script lang="ts">
  import TeamSection from '@lostgradient/cinder/team-section';

  const members = [
    { name: 'Alex Morgan', role: 'CEO', bio: 'Leads product and strategy.' },
    { name: 'Riley Chen', role: 'CTO', bio: 'Owns architecture and platform.' },
    { name: 'Jordan Lee', role: 'Design Lead', bio: 'Shapes the design system.' },
  ];
</script>

<TeamSection title="Meet the team" {members} />
Live preview
02

When to use

Use when
  • Introducing company teammates with names, titles, and short bios.
  • Showing a small "meet the team" grid in landing and about pages.
Avoid when
03

Examples

TeamSection

TeamSection with member cards, bios, profile links, and avatar-group summary.

04

Props

Props for team-section
Name Type Default Required Bindable Description
as 'section' | 'div' 'section' Wrapper element tag.
title text Optional section heading text.
description text Optional section description text.
members TeamSectionMember[] req Team members to render.
columns 2 | 3 | 4 3 Grid column count.
avatarGroupVisible boolean false Whether to render a compact AvatarGroup summary above the grid.
avatarGroupLabel text 'Team members' Label for the AvatarGroup summary.
maxWidth 'prose' | 'narrow' | 'wide' | 'full' 'wide' Max width token forwarded to Container.