Icon Card

Statistic cards are a wonderful way to highlight specific numerical facts.

University Communications has provided further information about this component with regards to best practices on their Web Creator Guide. Check out their guide for more tips and tricks for this component and more.

  • Published - Select or unselect to make component visible or not to site visitors. Defaults to published
  • Color Options (required) - Choose the colors which to use when displaying the component
    • White Background - Gray Cards
    • White Background - Black Cards
    • Black Background - White Cards
    • Black Background - Gray Cards
    • Gray Background - White Cards
    • Gray Background - Black Cards
  • Section Header (optional)
    • Include in Jump Links Menu - Select or unselect to make section title an anchor link
    • Section Title - Give the section a title that will help identify the component. This also doubles as an anchor link for the section when using the Current Page Section Menu on Basic Pages
    • Description - Short description that helps further explain the section
    • Button Color - Color of the CTA button (green, gold)
    • Button Link URL / Text - Identify where the button should take visitors and what the button should say
  • Icon (required) - Pick an icon from the Font Awesome icon list to display
  • Title (required) - Provide a short title to describe the icon. Typically 1-2 words
  • Description (optional) - Provide a little longer description of the statistic
  • Card Link URL / Text (optional) - Provides a simple link to more information

Instructions start on the Create or Edit Page within a piece of content.

  1. Create Content using the Add Component button
  2. Choose Icon Card from the list of Components in the Cards section
    OR
    Edit Content using the Edit button
  3. Switch the Published field on or off for the component to be published or unpublished
  4. (required) Choose the Color Options for the component
    1. White Background - Gray Cards
    2. White Background - Black Cards
    3. Black Background - White Cards
    4. Black Background - Gray Cards
    5. Gray Background - White Cards
    6. Gray Background - Black Cards
  5. (Optional) Section Header allows for the creation of a Call to Action (CTA) to display above or to the left of the accordions.
    1. Include in Jump Links Menu (defaults to yes)
    2. Section Title
    3. Description
    4. Button Color (green, gold)
    5. Button Link URL / Text
  6. (required) Chose an Icon to display using the autocomplete field
  7. (required) Give the card a Title
  8. (optional) Provide a little Description for the card. Should be short and to the point
  9. (optional) Give the Card Link a place to send users to learn more
  10. Click Add Icon Item to add more cards
  11. Repeat steps 6-10 until desired number of cards has been reached
    1. Minimum of 2 items with a maximum of 4 items

Icon Card Examples

Below is a sample of what a Statistic Card can look like. You can also find more examples on the next page.

More Examples
  • New Graduates
    every semester
    Link Text
  • Sports Clubs
    Find a sports club to join
  • Library
  • Financial Aid
    Apply today
    Link Text