Flip Cards

Flip cards are useful to help students recall information quickly. They can be used as quick knowledge checks or self-assessments. Hover flip cards only allow one card to be flipped at a time, whereas click flip cards keep the cards flipped until they are clicked again. Use Heading 2 for text on the front sides of cards for accessibility.

To copy Flip Cards onto a different page please make sure the page is in 'Edit HTML' mode.

Hover over, Tab to, or Tap to Flip the Cards

These cards only stay flipped while the cursor is hovering over them, when tabbed to, or until another card is tapped on a phone/tablet. Click to the left of the card and move cursor with keyboard to edit text on front sides of cards. Hover over the card and click to edit text on back sides of cards.

Flip Cards: Hover: start copy

Flip Cards: Hover: end copy

Click, Tab to + Press Enter, or Tap to Flip the Cards

These cards stay flipped when clicked or tapped, or when using tab and Enter on the keyboard. Images will be resized to fit into the 300 x 300 px box.

Note: You must open the source code editor using the toolbar icon </> in order to edit the back sides of the cards and to add a hidden Heading 2 to cards with images for screen reader users. (See comments in source code.)

Flip Cards: Click: start copy

Flip Cards: Click: end copy