Vertical Animated Numbers

June 19, 2024

Desktop Version

Requirements

  • Applied to Child Theme for ok.ubc.ca;
  • Two Column Row

Recommended Usage

The vertical animated number component behaves the same as the normal animated number component, except it will be vertically stacked and occupy the entire column width.

Component Fields:
The vertical animated numbers have the following fields:

  • Image (png) – Optional, but each image should be the same size.
  • Prefix – Optional such as dollar sign.
  • Number – Required.
  • Suffix – Optional.

Mobile/Tablet:
On mobile devices, the numbers will stack vertically.

Mobile Version

How to add a Vertical Animated Numbers component in a Two Column Row:

  1. Add a Page Section.
  2. Click Add New Inside Content Row and select Two Column Row.
  3. Click Add Component button > select Vertical Animated Numbers.
  4. Add as many numbers as you like.

 

Do’s and Don’ts

  • BE CONCISE.
  • Each image should be the same size.
  • Each group of numbers should have similarly themed content.
  • Like every other component, do not overuse vertical animated numbers.

Posted in ,