Skip to content

Web Support & Usability

University Information Technology (UIT)

Main Navigation

Snippets Library: Flashcard

 

What is a flashcard?

The flashcard snippet is similar to a panel-flip , but with a hover animation to display additional information. Think of it as a card with information on the front and back.

This is the front side of the flashcard

This is a flashcard. Hover anywhere on the panel to flip to view the back side.

This is the back side of the flashcard

This is a flashcard. Hover anywhere on the panel to flip to view the front side.

Suggested implementation

Because the flashcard snippet is considered an advanced feature, there are a few guidelines to optimize its functionality:

  1. Limit the number of additional stylings (i.e. helper classes)
  2. Multiple flashcards should be used in conjunction with the grid layout or custom columns snippets
  3. Avoid adding links or clickable items to the front of the flashcard

Creating a flashcard

Step 1:

On the page you are editing, click on the Snippets icon in the WYSIWYG Toolbar.

Step 2:

Select Flashcard and then click Insert.

flashcard option

Step 3:

Add your content to the front and back panel. You can also adjust the color of both sides of the panel by swapping out the text in the Panel Colors section.

panel color options

Step 4:

Click Save to view changes.

Flashcard color examples

Front Heading

Card content goes here.

Back Heading

Card content goes here.

Front Heading

Card content goes here.

Card content goes here.

Card content goes here.

Back Heading

Card content goes here.

Card content goes here.

Front Heading

Card content goes here.

Back Heading

Card content goes here.

Front Heading

Card content goes here.

Back Heading

Card content goes here.

Resources



Design Library



Helper Classes



Snippets Library

 

Last Updated: 10/19/23