Content Block: Stats > Small
This component is used to display quick, quantitative facts.
$5.6
million
A short few lines elaborating on what the stat number is about.
500+
purchases
A short few lines elaborating on what the stat number is about.
8,750
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 Amount, Amount 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 |