Jump to a component
AniCanonKit · Places
PlaceCard
The place or backdrop being made, on the left of its flow: its picture once drawn, or before that an empty frame naming what fills it (with the loader while it draws), its name, a quiet line under it, its facts and a note. Built from the core's Thumb and FactList; it lives in AniCanonKit, not the core.
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Web only
PlaceCard is made for the web, and isn’t part of Sakuga for iOS yet.
Android
Web only
PlaceCard is made for the web, and isn’t part of Sakuga for Android yet.
- Use it for
- The place or backdrop being made, on the left of its flow: its picture or an empty frame, its name, its facts and what happens next.
- Not for
- A character in its flowsCharacterCard
- A picture with its caption, in a grid or a stripThumb
- A place named in a prompt or a scriptMentionChip
- A job's stages in orderStages
Guidelines
One per flow screen, on the left, as CharacterCard is in the character flows. Nothing sits on the picture: the flow's footer holds the action.
import { PlaceCard } from '@anicanon/sakuga/anicanonkit';
const facts = [
{ label: 'District', value: 'Centro' },
{ label: 'Inside or out', value: 'Interior' },
{ label: 'Views', value: '5 planned' },
];
export default function PlaceCardExample() {
return (
<>
<PlaceCard
name="Sé station"
caption="A place in EBA"
placeholder="Drawing"
drawing
facts={facts}
note="You can close this. We’ll tell you when the anchor is ready."
/>
<PlaceCard
name="Sé station"
caption="A place in EBA"
image="/art/eba-se-station.webp"
lightMap="/art/eba-se-station.light.webp"
alt="Sé station: the mezzanine over the platforms"
facts={facts}
note="Approve it and the other 4 views are drawn from it."
/>
</>
);
}PropsPlaceCardProps
namerequiredstringcaptionstringimagestringaltstringlightMapstringlightbooleanplaceholderstringdrawingbooleanfacts{ label: string; value: string; }[]FactList: district, inside or out, views planned.notestringclassNamestringEach 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
place-card-empty-loader-sizeicon-size-mdplace-card-gapgap-lgplace-card-empty-gapgap-mdplace-card-head-gapgap-2xsType
place-card-font-familyfont-sansplace-card-empty-fonttext-small-strongplace-card-name-fonttext-title-3place-card-caption-fonttext-smallChecked 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
- Not focusable; a region named by
name, with the picture's alt fromaltor the name, the name as a level-2 heading, then the caption, facts and note as text. While it draws, the empty frame reads itsplaceholder, and its loader stays quiet inside the card. - 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.