Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
66 lines (56 sloc) 3.5 KB

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"
You can’t perform that action at this time.