ArtistCard

molecules

Performer/artist card — circular image, name, role, follow button. Used in event detail and artist pages.

ARIA Role: article

Demo

Card Title

Card description text goes here.

Props

Prop	Type	Required	Default
`id`	`string`	Yes	`—`
`name`	`string`	Yes	`—`
`image`	`ArtistImage`	Yes	`—`
`href`	`string`	Yes	`—`

TypeScript Interface

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

Assertions (NASA Rule 5)

[type]id, name, image, href all required(NASA Rule 5)
[aria]Image alt required; follow button has aria-pressed(WCAG 1.1.1, 4.1.2)

Usage

Import

import { Artistcard } from '@epasslive/design-system'

Basic

<Artistcard />

With Variants

<Artistcard variant="primary" size="md" />