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. 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 Option:
The component can be hyperlinked.

Designs:

Design 1: Clean

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

 

Design 2: Border with shadow

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

 

Design 3: Black background

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

Design 4: Blue background

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

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="fa-solid fa-users"></i>

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

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

160
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
150,000
Raised during the Scholarship Gala
18:1
Student to Faculty Ratio
Free
Parking and Laundry

  • Number or Text Statistic (Limited to 15 characters)

  • Content Alignment

  • Height Matching

  • Image Support

Implementation

  1. Open a page in Modern Campus 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.