share docs

2.5.3

Share

Share Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-share
Source code
View on Github
Dependencies

Overview

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"

Usage

  {% include "@bolt-components-share/share.twig" with {
  sources: [
    {
      name: "facebook",
      url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse"
    },
    {
      name: "twitter",
      url: "https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!"
    },
    {
      name: "linkedin",
      url: "https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com"
    },
    {
      name: "email",
      url: "mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com"
    }
  ],
  copy_to_clipboard: {
    text_to_copy: "https://boltdesignsystem.com"
  },
} only %}

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

 object —
  • —
text

Defines the label text in front of the social icons.

 string Share this page
  • —
size

Controls the size of icons and spacing.

 string medium
  • small or medium
align

Controls the horizontal alignment of label text and icons.

 string start
  • start, center, end
opacity

Controls the overall transparency of the share tool.

 integer 100
  • 100, 80, 60, 40, 20
sources

Social media sources to share to.

 array —
  • [items]:
    • Type: object
    • Properties:
      • name

        Name of the social media source.

        • Type: string
      • url

        The specifically formed share URL with query string.

        • Type: string
copy_to_clipboard object —
  • @bolt-components-copy-to-clipboard/copy-to-clipboard.schema.yml > Object details
    • attributes

      A Drupal-style attributes object with extra attributes to append to this component.


      Type: object
      • —
    • text

      This property has been renamed trigger_text


      Type: string
      • —
    • copiedText

      Use the custom_confirmation property instead if you need to change the confirmation text.


      Type: string
      • —
    • iconSize

      Use custom_trigger, custom_transition, and custom_confirmation properties if you need to change icon size.


      Type: string
      • —
    • url

      This property has been renamed text_to_copy


      Type: string
      • —
    • trigger_text

      Text to use for the inital copy button. Ignored if the custom_trigger property is used.


      Type: string
      • —
    • text_to_copy

      The text to copy to the clipboard.


      Type: string
      • —
    • custom_trigger

      (optional) Custom content to show for the initial copy trigger. If you pass a link, set the URL to '#!' since it should not being followed.


      Type: string OR object OR array
      • —
    • custom_transition

      (optional) Custom content to show while copy is in progress. This content will be rotated while the copying happens, so it's recommended to pass an icon.


      Type: string OR object OR array
      • —
    • custom_confirmation

      (optional) Custom content to show after a successful copy.


      Type: string OR object OR array
      • —
inline

Button version has been removed so this prop is no longer needed.

 —
  • —
copyToClipboard

Please use copy_to_clipboard.

 —
  • —

share

share size variations

Small Size

Medium Size

share opacity variations

Opacity will make the share tool semi-transparent, and transparency goes away if user hovers over it. This should be used if you don't want the share tool to create too much distractions on first impression.

Opacity: 100

Opacity: 80

Opacity: 60

Opacity: 40

Opacity: 20

share align variations

Align: start

Align: center

Align: end

share custom label

share theme variations

xdark

dark

light

xlight