Structure: Spacer

This component is used to give components extra space around them.

Usage Criteria

This component helps to add extra space around components and text so that the page does not look cluttered and elements are easier for the user to scan.

Do's and Don'ts

  • Use spacers between every component (or every group of the same component, as some are designed to space themselves if they are the same type, such as Content Block: Card > Short (Icon)).
  • End every page with a large invisible spacer.

Design Notes

Use spacers consistently throughout the website. For example, when using a medium sized invisible spacer around a specific component, do the same when that component appears again on a different page. This helps maintain consistency.

Configurable Options

This component has three different divider types: Invisible, Line, and Shadow. Other options for configuration include Layout, which sets the width of the divider, and Divider size.

Developer Notes

Type
Name
AEM Component Name

Structure: Spacer

Code Base Name

spacer

resourceSupertype
 
SCSS Attributes

spacer.scss

JavaScript
 
Status

Released (RC 1)

Version

Code Base v1.0

Designer Notes

Type
Name
Sketch Component Name

BCLC_Corporate_Designs/components/structure/spacer

Sketch Responsive Sizes

Desktop HD, Desktop, Tablet, Mobile

Status

Released (Master)

Version

Design 1.0