Article: Card > Featured
Article: Card > Featured (Excerpt)
Article: Card > Featured-4
Article: Card > List
Article: Card > Related
Article: Header
CTA: Button > Primary
CTA: Button > Secondary
CTA: Button > Social Share
CTA: Dropdown
CTA: Full Width Dropdown
CTA: Full Width Image
CTA: Text with Image
Content Block: Accordion
Content Block: Bio
Content Block: Card > Contact
Content Block: Card > Expandable (Image)
Content Block: Card > Short (Icon)
Content Block: Card > Short (Image)
Content Block: Error
Content Block: FAQ
Content Block: Intro
Content Block: Related Items
Content Block: Reports List
Content Block: Section Title with Desc
Content Block: Stats > Featured
Content Block: Stats > Small
Content Fragment
Form: FOI Request Container
Header: Full Width
Header: Hero
Header: Scaled (Subtitle)
Header: Scaled (No Subtitle)
Header: Text Only
Mixed Media: Block Quote
Mixed Media: Image
Mixed Media: Image Gallery
Mixed Media: Video Player
Nav: Breadcrumbs
Nav: Sub-section Nav
Nav: Topic Filter
Results: Articles
Results: Articles by Tag
Results: Media Releases
Results: Reports
Structure: Section Container
Structure: Spacer
Quick Search
Table
Tabs
Text
Title

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