Content Block: Stats > Small

This component is used to display quick, quantitative facts.

$5.6

million

A title here related to the stat

A short few lines elaborating on what the stat number is about.

500+

purchases

A title here related to the stat

A short few lines elaborating on what the stat number is about.

8,750

A title here related to the stat

A short few lines elaborating on what the stat number is about. This sits under the title.

Usage Criteria

This component helps display quick, quantitative facts in a way that draws visual attention.

Do's and Don'ts

  • Use copy that is of similar length when using multiple instances of this component. This is to prevent having a large gap between different rows, as it adjusts to the height of the tallest component within a row.

Design Notes

For a greater visual impact, you may consider using the Content Block: Stats > Featured component instead, as it serves a similar purpose as this one. However, this would only work if the text was very short and there are only a few items to list. See the Content Block: Stats > Featured component for more details.

Configurable Options

This component has the option of configuring the AmountAmount prefix, and Denomination. While the Amount prefix and Denomination are optional, a numerical Amount is required. 

Developer Notes

Type
Name
AEM Component Name

Content Block: Stats > Small

Code Base Name

stats-small

resourceSupertype

bclccorporate/components/content/base-textimage

SCSS Attributes

 

JavaScript
 
Status

Released (RC 1)

Version

Code Base v1.0

Designer Notes

Type
Name
Sketch Component Name

BCLC_Corporate_Designs/components/content-block/stats/small

Sketch Responsive Sizes

Desktop HD, Desktop, Tablet, Mobile

Status

Released (Master)

Version

Design 1.0