Content Block: Card > Short (Image)

This component displays related information that is short in length.

Short Image

A short description here to accompany the photo above.

Short Image

A short description here to accompany the photo above.

Short Image

A short description here to accompany the photo above.

Usage Criteria

This component helps display content with very short copy, and emphasizes visuals. This makes it good for catching a user's attention.

Do's and Don'ts

  • Have these components configured in a similar manner if they are grouped together (ie. if one of the components have a title but no description, all the others in the same group should match).
  • Do not have more than 4 instances of this component grouped together.

Design Notes

The optimal number for a row is 3 instances of the component next to each other, but it can reach 4 without breaking into a second line. This is why 4 is the maximum recommended per group. If more instances are required, consider using the Content Block: Card > Short (Icon), which can function better for longer lists of short content.

Configurable Options

This component has basic configurable options such as Title and Short description, with the choice of having an image or an icon as the main visual.

Developer Notes

Type
Name
AEM Component Name

Content Block: Card > Short (Image)

Code Base Name

content-block-short

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/card/short-image

Sketch Responsive Sizes

Desktop HD, Desktop, Tablet, Mobile

Status

Released (Master)

Version

Design 1.0