Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Characters

CastGrid

A faction's cast as CastCards, six across on desktop. Pass items; each card links to the character's page. Head each grid with a SectionHeader carrying the faction's icon and count.

@anicanon/sakuga/anicanonkitv1.0Used onWeb · iOS · AndroidFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

CastGrid for iOS is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Android

Coming soon

CastGrid for Android is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Use it for
A faction's cast on the cast page: its CastCards six across on desktop, each linking to the character's page.
Not for

Guidelines

  • A card is a link only when it has an href.
CastGridExample.jsxReact
import { CastGrid } from '@anicanon/sakuga/anicanonkit';

const items = [
  {
    name: 'Kiko',
    image: '/art/eba-cast-kiko.webp',
    role: 'Leads the E.R.A.',
    meta: '2 looks',
  },
  {
    name: 'Rick',
    initial: 'R',
    action: { label: 'Face sheet ready, review', tone: 'attention' },
  },
  {
    name: 'Sophia',
    initial: 'S',
    action: { label: 'Continue setup', tone: 'draft' },
  },
  {
    name: 'Tattoo',
    initial: 'T',
    action: { label: 'Designing the look', tone: 'busy', time: '0:31' },
  },
  {
    name: 'The Professor',
    image: '/art/eba-cast-the-professor.webp',
    role: 'Arthur Penhaligon',
    state: { label: '1 look waiting on you', tone: 'attention' },
  },
  { name: 'Felix', initial: 'F' },
];

export default function CastGridExample() {
  return <CastGrid columns={3} items={items} />;
}

PropsCastGridProps

itemsrequired
CastCardProps[]
columns
number
label
string
className
string

Types

interface CastCardProps {
    name: string;
    image?: string;
    initial?: string;
    role?: string;
    meta?: string;
    href?: string;
    state?: {
        label: string;
        tone?: 'attention' | 'busy';
    };
    action?: {
        label: string;
        tone?: 'attention' | 'draft' | 'busy';
        time?: string;
    };
}
CastGridExample.swiftiOS · coming soon
CastGridExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Space and shape

cast-grid-gap
gap-lg
12px

Checked automatically with axe-core 4.11.4 against WCAG 2.2 A and AA, on the live preview above, in light and dark, on 26 October 2026.

Result
No issues found, in light or in dark.
By design
A list named by label with a card per item: a card with href is a link that Tab moves to and Enter follows, named by the character's name, and a card without one is not a link.
Not tested
The automated check doesn't test keyboard use, focus order or what a screen reader says. The lines above are the design system's own account of them.