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 |