Animated Numbers

January 31, 2019

Example Animated Numbers. View in live Demo Site >

Requirements

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

Recommended Usage

The Animated Numbers component displays a set of large numbers and labels where the numbers automatically count up to the number entered upon page load.

Because the numbers animate on page load, this component should be used at the top of your landing page or homepage just below your lead paragraph.

Component Fields:
Each Animated Numbers component consists of Image icon, Prefix, Number, Suffix, and Text fields.

Interactivity:
The number provided in the component fields automatically count up upon page load. Icons are restricted in the code to retain a common height.

Mobile/Tablet:
When viewed on mobile devices, the numbers will stack on top of one another from the left-right order to top-bottom. The numbers will alow count up on mobile devices.

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

How to add an Animated Numbers component

  1. Add a Page Section.
  2. Click Add New Inside Content Row  and select Single Column Row.
  3. Click Add Component button > select Animated Numbers.  (Please  submit  a ticket  if  you cannot  find  the option.)
  4. Click Add Number button to add individual text boxes.
  5. At the top, select your desired Column Layout.
    1. One Column – All Animated Numbers stacked and centered in a single row.
    2. Two Column – Two Animated Numbers (50/50) in a single row.
    3. Three Column – Three Animated Numbers (33/33/33) in a single row
    4. Four Column – Three Animated Numbers (25/25/25/25) in a single row.
  6. Add your Image.
  7. Add your Prefix.
  8. Add your Number.
  9. Add your Suffix.
  10. Add your Text.
  11. Reorder your Animated Numbers 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.
  12. Click Preview to often to test your Animated Numbers. Make edits as necessary.
  13. Publish/Update when ready to go live.

Do’s and Don’ts

  • BE CONCISE.
  • Test your Animated Numbers often.
  • Test your icons frequently to ensure that they are visually consistent. If you need new icons, contact the University Relations design team to inquire about solutions.

Posted in , ,