Content Block: Card > Short (Icon)
This component is used to display a list of features or information that is closely related together.
Usage Criteria
This component is used to display a list of features or short pieces of information that are closely related together on the same topic. It can also be used to show a range of options when the CTA is included, rather than just be informational.
Do's and Don'ts
- Have these components configured in a similar manner if they are grouped together (ie. if one of the Content Block: Card > Short (Icon) components have a title but no description, all the others in the same group should match).
- Do not use this component if there is less than 2 items to list.
Design Notes
Try to keep the content approximately the same length, as this will affect the overall row height and might leave a large gap if there is a big difference. This also impacts the mobile view, since the cards will match the height of the component with the longest text.
Configurable Options
This component has the option to configure the Font Awesome Name (main icon). The Title and Description are optional.
Developer Notes
Type |
Name |
---|---|
AEM Component Name |
Content Block: Card > Short (Icon) |
Code Base Name |
stats-with-icon |
resourceSupertype |
|
SCSS Attributes |
stats-with-icon.scss |
JavaScript |
stats-with-icon.js |
Status |
Released (RC 1) |
Version |
Code Base v1.0 |
Designer Notes
Type |
Name |
---|---|
Sketch Component Name |
BCLC_Corporate_Designs/components/content-block/card/short-icon |
Sketch Responsive Sizes |
Desktop HD, Desktop, Tablet, Mobile |
Status |
Released (Master) |
Version |
Design 1.0 |