share docs

2.12.1

Share

Share Component in Bolt

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"
  {% include "@bolt-components-share/share.twig" with {
  sources: [
    {
      name: "facebook",
      url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;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 %}

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
        • Enum: facebook, twitter, linkedin, email
      • 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, object, 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, object, array
    • custom_confirmation

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


      Type: string, object, 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

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