Statistic on Base Toolkit - Version 2.12

Preview this component (Custom Element; v2.4.0; 12/8/2021)

Guidelines using the component

Nation's Top Six Overall ranking among undergraduate programs in the U.S. U.S. News and World 2022

97% of our 2020 graduates with teaching degrees plus licensure are employed in the field of education.

Technical Information

For readability, this is inside a container that is restricted to 500px. This component will expand to fill the container it is in, and is usually placed in a flex or grid container.

Notes and Usage

This can be used inside the il-formatted class to ensure the HTML inside the component is formatted correctly.

Component Display

Change Your Content and Options

Template -- enter raw HTML here

Template Options

Important Classes

Color Theme

Classes

Size of the statistic

Attributes

N/A

Advanced Options

These options are only to be used in advanced situations -- most of your needs should be met through the attributes and classes, and this breaks the intent of having a unified design.

Custom Style Tag before text

--il-statistic-heading-color (Color of the statistic header; some colors will be rejected based on the theme)
--il-statistic-text-color (Color of the statistic text; some colors will be rejected based on the theme)
--il-statistic-margin (Margin (default to .9375rem))--il-statistic-font-size (Body font size)--il-statistic-line-height (Body line height)--il-statistic-stat-font-size (Statistic font size)--il-statistic-stat-line-height (Statistic line height)--il-statistic-stat-padding (Statistic padding)--il-statistic-source-font-size (Source font size)--il-statistic-source-line-height (Source line height)--il-statistic-padding (General padding (default to 30px 20px for all except extra large))--il-statistic-width (Width of the statistic (defaults to 'auto'))--il-statistic-heading-margin (Margin around the stat)--il-statistic-source-margin (Margin around the source)

How to add it to your page

Copy and paste this in your page. Remember

Make sure you have updated your component to make sure the below code is completed.
Make sure you have the Header code in your header.

Note that this uses the custom style 'builder-custom'. You may need to change this if you are using multiple versions of this component with different styles.

Copied to clipboard