Share
The Share component allows readers to share a web page via social media or email. By default, the social networks supported are Facebook, Twitter, Pinterest and YouTube. These links are set via Javascript and not added via the CMS.
- Overview
- Specification
- Style Guide Manager
- Examples in-situ
- Usage
Specification
This provides guidance on the build, layout and content options for this component.
Layout specification
The Share bar can only be configured in the Style Guide Manager.
Interaction
These are the interactive aspects of the component.
| Interaction |
|---|
| Social media icons allows user to share page via specific social media platform. |
These are the Style Guide Manager settings that are specific to this component. For global settings see the Style Guide Manager section.
| Property | Requirement & purpose | Default | SGM override |
|---|---|---|---|
| Icon colour | Sets the site wide icon colour for share icons. | Grey | Choose from colour palette. |
| Border bottom colour | Sets the site wide border bottom colour for the share icons. | Grey | Choose from colour palette. |
| Horizontal alignment | Controls the horizontal alignment of the search icons. | Align right | Left or right. |
Desktop
Aleve
Alka-Seltzer
Claritin
Tablet
Aleve
Alka-Seltzer
Claritin
Mobile
Aleve
Alka-Seltzer
Claritin
General usage dos and don'ts
| ✅ Do's | ❌ Don'ts |
|---|---|
| Ensure the text is legible. | Do not use a background image that makes the text hard to read. |
| This component can be attached to any of the individual assets on the site but are more commonly useful with information-based content (articles, images and videos). | |
| It can be included on product pages but should be structured so the content serves a purpose beyond promotion. |