2.17.0

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

  {% 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.

Debug Panel