@bolt/components-share

A list of share-to-social-media actions.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
20010Jul 30, 2021Jun 14, 2017Minified + gzip package size for @bolt/components-share in KB

Readme

Share block. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-share

Description

The share component provides the user a visual queue to share the content with relevant peers, as well as an easy mechanism to actively do the sharing.

OG Tags

Example

<meta property="og:type" content="article" />
<meta property="og:title" content="Bolt Design System: Page Title" />
<meta property="og:description" content="Sample description" />
<meta property="og:image" content="https://boltdesignsystem.com/images/500x500-480.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="480" />
<meta property="og:image:height" content="480" />
<meta property="og:url" content="https://boltdesignsystem.com/some-page-title-here" />
<meta property="og:site_name" content="Bolt Design System" />
<!-- Twitter specific tags -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Bolt Design System: Page Title" />
<meta name="twitter:description" content="Sample description" />
<meta name="twitter:image" content="https://boltdesignsystem.com/images/500x500-480.jpg" />
<meta name="twitter:site" content="@pega" />

Best Practices

  • Don't use the share tool with a page's related sections
  • Implement any "stickiness" and placement functionality on the platform the component is being used in
  • For larger screens, ease-in opacity from 0% to 100% on scroll. The placement should be lower right-hand side and fixed until the main page content is scrolled pass
  • Don't have the fixed position of the component overlap any "related content"

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.