GitHub

TeamGrid

Block
Interactive team member grid with photo cards and click-to-open modal detail views

Installation

pnpm add @corew500/ui

Usage

import { TeamGrid } from "@corew500/ui/blocks/team-grid"

<TeamGrid>Content</TeamGrid>

API Reference

Props

PropTypeDefaultDescription
members*TeamGridMember[]Team members to display
titlestringSection title
descriptionstringSection description
badgeSectionHeadingBadgeSection badge
headingLevelenum2Heading level for section title
noContainerenumfalseDisable Container wrapper
renderMemberDetail(member: TeamGridMember) => ReactNodeRender custom content in the modal below the bio
renderSocialIcon(platform: string) => ReactNodeRender custom icon for a social platform
columnsenum4

Accessibility

Keyboard Navigation

  • - Cards use `role="button"` with keyboard support (Enter/Space)

Focus Management

  • Dialog has focus trap and proper ARIA attributes

Screen Readers

  • Social links have aria-labels

Localization

Translatable Content

  • - All visible strings passed via props (name, role, bio, tag labels)

Related

Related Components