The quickfacts component is designed to communicate a quick listing of facts to the audience, usually in the form of recognition, accolades or a statistic about the corresponding subject on the page.
An example of this section level component in action, please see the Department Home Page
On a marketing landing or home page for a major unit, consider this component to convey top level “fast facts” about the content you are communicating to the user.
For example, on a college home page, point of pride or stats about the college can go here like the number of degrees offered, the amount of grant funding awarded, the number of faculty or research offered to undergrads, etc.
If your content point has corresponding relevant media that you would like to highlight or content that will ultimately link to another resource, consider another component like our content card groups which feature media as well as call to action buttons for users to dig further into your site.
Due to the quickfacts not containing any links or calls to action, it is recommended to only have one quickfacts section on a page. While there is no limitation on what types of page a quickfacts section can be added to, we would also recommend not making this a standard on all pages.
This component does not offer any interactivity, and is not designed to be animated. Each quick fact is structured in it’s own div with a corresponding heading tag (h2) for the stat and paragraph for the text. No aria labels or tags should be needed.
This component is supported in our Cascade templates via the Asset Factory: Blocks > Quickfacts and can be assigned in a page template at the row level.
The Quickfacts component supports 1-6 facts, however, please note, utilizing our 12-column grid system, it’s difficult to accurately support more than 5. The main headline for each fact is more limited in width in relation to the number of facts the components needs to display. Even on large desktop screens, because of these limitations, we strongly urge not to use more than 4 facts in a component. This component is not designed to be more than one row.
Quickfacts has a full set of color variations:
Each fact is composed of the following elements:
Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/functional.html#quick-facts-component
<section class="quick-fact-wrapper">
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 col-sm-12">
<div class="quick-facts-content">
<h2>130+</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
</div>
</section>
/* components/03-sections/07-quickfacts/quickfacts.scss */
/* BEGIN quickfacts.scss */
//default color, white background
.quick-fact-wrapper {
overflow: hidden;
position: relative;
z-index: 0;
padding-top: 50px;
padding-bottom: 50px;
padding: 30px 0px 40px 0px;
position: relative;
::after {
content: '';
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:1.0%7D%3C/style%3E%3C/defs%3E%3Cpath class='fa-secondary' d='M352 256c-8.188 0-16.38-3.125-22.62-9.375L192 109.3L54.63 246.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 252.9 360.2 256 352 256z'/%3E%3Cpath class='fa-secondary' d='M352 448c-8.188 0-16.38-3.125-22.62-9.375L192 301.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 444.9 360.2 448 352 448z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: -10;
opacity: 0.007;
width: 100%;
height: 100%;
overflow: hidden;
}
.row {
margin: 0px;
}
.quick-facts-content {
text-align: center;
z-index: 100;
h2 {
font-family: "kulturista-web", serif;
font-weight: 700;
margin-bottom: 20px;
font-size: 4.5rem;
}
p {
font-size: 1.2rem;
font-weight: 600;
width: 100%;
line-height: normal;
}
}
.department-heading {
margin-bottom: 30px;
}
h3 {
color: $blue;
}
.quick-facts-content h2 {
color: $orange-a11y;
}
.quick-facts-content p {
color: $blue;
}
&.blue-bg {
::after {
opacity: 0.025;
}
h3 {
color: $white;
}
.quick-facts-content {
h2 {
color: $orange-a11y;
}
p {
color: $white;
}
}
}
&.grey-bg {
::after {
opacity: 0.005;
}
h3 {
color: $blue;
}
.quick-facts-content {
h2 {
color: $orange-a11y;
}
p {
color: $blue;
}
}
}
&.orange-a11y-bg {
background-color: $orange-a11y;
h3 {
color: $white;
}
.quick-facts-content {
h2 {
color: $blue;
}
p {
color: $white;
}
}
}
@include media-breakpoint-down(lg) {
.quick-facts-content {
h2 {
font-size: 3.2rem;
}
p {
font-size: 1.0rem;
}
}
}
@include media-breakpoint-down(md) {
padding-top: 30px;
padding-bottom: 30px;
.quick-facts-content {
h2 {
font-size: 3.5rem;
}
p {
font-size: 1.1rem;
}
}
}
}
/* Dark Mode - Component Styles - Quickfacts Styles */
@include color-mode(dark) {
.quick-fact-wrapper .quick-facts-content p {
color: $white;
}
.quick-fact-wrapper.grey-bg {
.quick-facts-content p, h3, .h3 {
color: $blue;
}
}
.quick-fact-wrapper {
h3, .h3 {
color: $white;
}
& ::after {
opacity:.25;
}
&.blue-bg ::after {
opacity:.025;
}
&.grey-bg ::after {
opacity:.005;
}
&.orange-a11y-bg ::after {
opacity:.007;
}
}
}
/* Component Styles - Quickfacts END */
/* END quickfacts.scss */
<section class="quick-fact-wrapper">
<div class="container">
<div class="row">
{{#each_upto items 1}}
<div class="col-xl-12 col-lg-12 col-sm-12">
<div class="quick-facts-content">
<h2>{{ headline }}</h2>
<p>{{ text }}</p>
</div>
</div>
{{/each_upto}}
</div>
</div>
</section>