Flashcard

01Preview

Change the controls to try every supported combination. Click the card, or focus it and press Enter or Space, to flip it.

import { Flashcard } from '@nuton/ui'

const [flipped, setFlipped] = useState(false)

<Flashcard
  front="What is Human-Centered Design?"
  back="A design approach that puts people’s needs, behaviours and experiences at the centre of every stage of the design process."
  hint="Think about who comes first: the product or the person using it?"
  note="Design starts with humans, not screens."
  flipped={flipped}
  onFlippedChange={setFlipped}
/>

02Installation

pnpm add @nuton/ui @nuton/tokens @remixicon/react

npm install @nuton/ui @nuton/tokens @remixicon/react

yarn add @nuton/ui @nuton/tokens @remixicon/react

import '@nuton/tokens/tokens.css'
import '@nuton/ui/styles.css'

03Usage

import { Flashcard, FlashcardDeck } from '@nuton/ui'

<Flashcard
  front="What is Human-Centered Design?"
  back="A design approach that puts people's needs at the centre of every stage."
  hint="Who comes first: the product or the person?"
/>

<FlashcardDeck cards={cards} onRate={(rating, card) => save(card.id, rating)} />

• Keep the question short. It is the flip button's accessible name, so it is read every time the card gets focus.
• Use a FlashcardDeck for more than one card. It adds previous and next buttons, the position (“Card 3 of 12”) and arrow-key movement.
• Add a hint when the question is hard. People open it on purpose, so it doesn't give the answer away.
• Use note for a short takeaway under the answer (Figma “Remember: …”).
• Pass onRate when your app schedules reviews. Got it and Review again appear once the answer is shown.

04Variants and sizes

Flashcard has one size: it fills its container (Figma 612px in a lesson, 704px in the component set). Figma's three states are the sides and the hint.

Question side

<Flashcard
  front="What is Human-Centered Design?"
  back="A design approach that puts people first."
/>

Answer side with a note

<Flashcard
  defaultFlipped
  front="What is Human-Centered Design?"
  back="A design approach that puts people's needs, behaviours and experiences at the centre of every stage of the design process."
  note="Design starts with humans, not screens."
/>

Question with the hint open

<Flashcard
  defaultHintOpen
  front="What is Human-Centered Design?"
  back="A design approach that puts people first."
  hint="Think about who comes first: the product or the person using it?"
/>

05States and interactions

Motion

The card turns over on its vertical axis in --nu-duration-slow (300ms) with --nu-ease-standard (code-only). When people ask for reduced motion, the sides swap with no animation.

State tokens

Set on .nu-flashcard: --nu-flashcard-bg (Bg/Weak-50), -stroke (Stroke/Soft-200), -radius (24), -focus-stroke (State/Primary/Base), -focus-shadow (buttons/primary-focus), -duration (duration-slow) and -min-height (335px).

06Composition examples

Lesson deck with rating

After a lesson, a deck lets people check what they remember. Got it and Review again appear once the answer is shown, and move on to the next card.

<FlashcardDeck
  cards={cards}
  onRate={(rating, card, index) => saveRating(card.id, rating)}
/>

Controlled deck

Control index to start a deck again or to remember where someone stopped.

const [index, setIndex] = useState(0)

<FlashcardDeck cards={cards} index={index} onIndexChange={setIndex} showProgress={false} />
<Button size="sm" appearance="stroke" onClick={() => setIndex(0)}>Start again</Button>

07API reference

Flashcard props

FlashcardDeck props

Accessibility

You must: keep each question short and unique, and don't put links or buttons inside front or back (they sit inside the flip button).

Figma mapping

08Guidelines and related components

Do and don't

Related components

• QuizMultiple-choice questions with checked answers.
• ProgressThe bar the deck uses to show its position.
• ButtonThe hint, navigation and rating buttons.