ArtistCard

Status

Planned molecule — the React component is not yet implemented. Nothing is exported from the DS barrel; the render above is a design reference mock typed to the planned interface, not the component.

Planned API

Sketch of the intended contract. Until the component ships, this is not importable code.

interface ArtistCardProps {
  id: string;
  name: string;
  role: string;
  image: { url: string; alt: string };
  href: string;
  isFollowing?: boolean;
  onFollowToggle?: () => void;
}

// Sketch — ArtistCard is planned and NOT exported from the barrel yet.
<ArtistCard
  id="marie-tremblay"
  name="Marie Tremblay"
  role="Vocals • Jazz"
  image={{ url: '/artists/marie.webp', alt: 'Portrait of Marie Tremblay' }}
  href="/artists/marie-tremblay"
  isFollowing={false}
  onFollowToggle={() => follow('marie-tremblay')}
/>

When to use

• Lineup sections in event detail pages.
• Search results filtered by artist.
• Dedicated artist profile pages.

Accessibility

Planned contract (no implementation exists to audit yet): the avatar is a real <img> whose alt text comes from image.alt (WCAG 1.1.1); the follow toggle is a <button aria-pressed={isFollowing}> whose visible label reflects the state (Follow / Following) per WCAG 4.1.2 (Name, Role, Value); the card root is an <article> (implicit role="article"); the follow button keeps a 44×44px tap target (--ep-tap-min) per WCAG 2.5.5.

Props