Content Block: Related Items

This component provides supplementary links to pages or larger sections of content.

Compact size with subtitle

A short sentence goes here giving more context about the related links

H1 Full size with subtitle

A short sentence goes here giving more context about the related links

H2 Full size with subtitle

A short sentence goes here giving more context about the related links

H3 Full size with subtitle

A short sentence goes here giving more context about the related links

Usage Criteria

This component helps display supplementary links and resources after a page or larger section of information.

Do's and Don'ts

  • If placing two or more instances of this component directly next to each other, please use the same format (ie. if one of the Content Block: Related Items components uses an H2 header, make the others match)
  • Use this component as a follow up to main content (placed underneath); never place it at the top of a page.
  • Avoid using this component without having a title. If there is no title, ensure there is another way to provide context into what the links are for.

Design Notes

When using this component, please ensure to group similar types and not mix link types. If the supplementary links are of different types, this would be a good scenario to use two instances of this component next to each other, and change the title appropriately. For an example, see this page.

Configurable Options

This component allows the configuration of the type of link the URL directs to. Depending on what is selected (ie. PDF document, Internal link, External link...) the icon to the right of the list item will change. 

There is also an option to configure the layout. The most common form is Horizontal. For a stacked layout, choose Vertical.

Developer Notes

Type
Name
AEM Component Name

Content Block: Related Items

Code Base Name

button-list

resourceSupertype
 
SCSS Attributes

button.scss

JavaScript
 
Status

Released (RC 1)

Version

Code Base v1.0

Designer Notes

Type
Name
Sketch Component Name

BCLC_Corporate_Designs/components/content-block/related-items

Sketch Responsive Sizes

Desktop HD, Desktop, Tablet, Mobile

Status

Released (Master)

Version

Design 1.0