Flip Cards (Numbered)

January 29, 2019

Example Flip Cards (Numbered). View in live Demo Site >

Requirements

This component is available in the Single column row on the Faculty and Department theme.

Recommended Usage

The Flip Card component displays a set of square images with a ‘flip’ animation on mouse hover. Each Flip Card is automatically numbered based on the order entered in the component editor. If you’d like to have numbers hidden on a specific set of Flip Cards, submit an IT Helpdesk ticket to the web team.

Due to the size limit of the square cards on tablet devices, it is very important to keep the frontside text headline and the backside text short and concise. Cards are a fixed size and any content exceeding the size of the flip card will be cut off. The recommended word limit for Flip Card Back Text is ~50 words or 10 lines.

Component Fields:
Each Flip Card box item consists of an Image, Front Text, and Back Text fields.

Interactivity:
Each card ‘flips’ horizontally on its Y-axis on mouse hover. The front number is automatically generated based on the order set in the component editor. Only one Flip Card may be open at a time.

Mobile/Tablet:
When viewed on mobile devices, this component will collapse into a dropdown accordion view. The number and text on the front of the Flip Card becomes the accordion heading title and the text on the back of the Flip Card forms the content within the accordion when opened.

On tablet view, the font size of the back text is reduced. The cards will flip when tapped rather than hover.

How to add a Flip Cards (Numbered) component

  1. Add a Page Section.
  2. Click Add New Inside Content Row  and select Single Column Row.
  3. Click Add Component button > select Flip Cards. (Please  submit  a ticket  if  you cannot  find  the option.)
  4. Click Add Flip Card button to add individual text boxes.
  5. At the top, select your desired Card Layout.
    1. Two Column – Two Flip Cards (50/50) in a single row.
    2. Three Column – Three Flip Cards (33/33/33) in a single row.
  6. Add your Image.
  7. Add your Front Text.
  8. Add your Back Text.
  9. Reorder your Flip Cards by dragging and dropping each item to your desired order. Hover over the numbered grey bar on the far left to click and drag each item up or down.
  10. Click Preview to often to test your Flip Cards. Make edits as necessary.
  11. Publish/Update when ready to go live.

 

Do’s and Don’ts

  • BE CONCISE. Space is limited inside the Flip Cards component. Fewer words in the text box allow for more flexibility on smaller mobile/tablet screens.
  • Try to keep your word counts even between Flip Cards.
  • The recommended word limit for Flip Card Back Text is ~50 words or 10 lines due to responsive sizing on tablet devices. Font size will automatically adjust to a smaller size on tablets. Text that exceeds the size of the flip card will not display.
  • Test your Flip Cards often. Make sure you are writing concisely and leaving room at the bottom of each box.
  • Flip Cards are very large. Consider using a different component to link to your page or post if you have more than 6 cards to present.
  • Don’t use Flip Cards to force users to browse your website with Flip Cards as the primary way to navigate.

Posted in , ,