Infographic Component

The infographic component allows a number or text value to stand out and easily catch the attention of your visitors.

There are four design styles to fit a variety of campaign styles. Media elements include the Font Awesome library or an image file. A count-up animation can also be enabled to increase visual impact. Additionally, you may hyperlink the entire block or keep it un-linked.

Options:

Preview of options

 

Media:
Choose between any of the FontAwesome icons or an image file. Transparent PNG files are recommended when using images.

Statistic:
Enter a number or text (limited to 10 characters). When using a valid number, a count up animation is available.

Headline:
 Bold attention grabbing text.

Description:
Text field to describe the info graphic. 

Advanced Options:
When using a valid integer, the component provides the option to enable a count-up animation. A starting value for the count can also be set. The component can also be hyperlinked.

Designs:

Design 1: Clean

9,893
Enrolled Students
Full and part-time undergraduate and graduate students. (Fall 2020)

 

Design 2: Border with shadow

9,893
Enrolled Students
Full and part-time undergraduate and graduate students. (Fall 2020)

 

Design 3: Black background

9,893
Enrolled Students
Full and part-time undergraduate and graduate students. (Fall 2020)

Design 4: Blue background

9,893
Enrolled Students
Full and part-time undergraduate and graduate students. (Fall 2020)

When to use the stat promo component

Use this component to highlight a number or text statistic, so it catches the attention of your visitors.

Usability guidance

You can choose between four design styles.

When entering a font awesome icon class, enter only the class name (shown in bold): <i class="fas fa-users"></i>

When using an image file for the icon, a PNG file with transparency recommended.

The count-up animation option of this component should be used sparingly. Multiple page animations can be distracting and overwhelming to visitors. The animation requres a valid integer without commas or decimal points.

A vertical alignment features has been made available in the advanced options of this component. This features can assist with the design enhancements when used within a column snippet.

Special Features

Areas of Study
At Stockton University, you can choose an experience that matches your interests.
94
The number of Stockton Faculty with the highest degree in their field.
Heart and Hands
Raised during the Scholarship Gala
18:1
Student to Faculty Ratio
Free
Parking and Laundry

  • Number Symbols

  • Count-up Animation

  • Content Alignment

  • Height Matching

  • Image Support

  • Text Override
    (up to 10 characters)

Implementation

  1. Open a page in Omni CMS and enter editing mode.
  2. Place your cursor where you would like to place an image.
  3. From the toolbar, select the component icon  Snippet icon , which resembles an atom symbol.
  4. From the list of components, select the Infographic component.
  5. Fill in the required fields and select your options.
  6. Save and preview.