Content Block: Card > Short (Icon)

This component is used to display a list of features or information that is closely related together.

Short Icon with CTA

Some description about the topic here. This is a short paragraph meant to elaborate on the heading of this icon component. Keep it relevant and at an appropriate length.

View reports

Short Icon with no CTA

Some description about the topic here. This is a short paragraph meant to elaborate on the heading of this icon component. Keep it relevant and at an appropriate length.

Short Icon with no Description

Short Icon with no Title

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