Jump to a component
Core · Content
FactList
FactList pairs a quiet name with its value, two columns, values to the right. For measured facts (a colour match across a join, the length of a trimmed cut), never for things the creator edits. layout="grid" sets each fact as a small block, its name over its value, with an optional note under it ("since Fire at Sé"): who a character is at a point in the story.
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Coming soon
FactList 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
FactList 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
- Measured facts as a quiet name and its value (a colour match across a join, the length of a trimmed cut), and with
layout="grid"who a character is at a point in the story. - Not for
- Settings the creator edits, each opening its choicePropertyList
- A character's picked facts, each with its picker's iconCharacterStats
- A Studio section showing what it is set toPanelRow
import { FactList } from '@anicanon/sakuga/ui';
export default function FactListExample() {
return (
<FactList
items={[
{ label: 'Brightness', value: '2C is 12% brighter' },
{ label: 'Contrast', value: '−4%' },
{ label: 'Place and light', value: 'Same · night' },
]}
/>
);
}PropsFactListProps
itemsrequired{ label: string; value: ReactNode; note?: string; }[]layout'columns' | 'grid'columnsnumberclassNamestringEach 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
fact-row-gapgap-mdfact-column-gapgap-lgfact-grid-gapgap-mdfact-item-gapgap-2xsfact-item-padding-yinset-smfact-item-padding-xinset-mdfact-item-radiusradius-mdfact-grid-dd-small-margin-topgap-2xsType
fact-fonttext-captionfact-dd-font-weightweight-strongfact-grid-dt-fonttext-eyebrowfact-grid-dt-letter-spacingtracking-capsfact-grid-dd-fonttext-labelfact-grid-dd-small-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 description list, so each name is read as a term and its value, with any
note, as its description. - 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.