2.8.0-beta.4

Animate

Animations for Bolt Design System

Published

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

The Bolt Animate Component

  <bolt-animate in="fade-in"> ...</bolt-animate>

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)
initialAppearance string hidden
  • default or hidden
in string none
  • none, fade-in, slide-down, fade-in-slide-up, fade-in-slide-down, fade-in-slide-left, fade-in-slide-right, fade-in-fade-out
inDuration

Set in milliseconds

number 500
inDelay

Set in milliseconds

number 0
inEasing string ease
  • ease, ease-in, ease-out, ease-in-out, linear
inOrder number 1
idle string none
  • none, pulse, spin, heart-beat
idleDuration

Set in milliseconds

number 500
idleDelay

Set in milliseconds

number 0
out string none
  • none, fade-out, fade-out-slide-up, slide-up, fade-out-slide-down, fade-out-slide-left, fade-out-slide-right
outDuration

Set in milliseconds

number 500
outDelay

Set in milliseconds

number 0
outEasing string ease
  • ease, ease-in, ease-out, ease-in-out, linear
outOrder number 1
showMeta boolean false

Slots

Name Required? Description
default No wrapped content to animate

Methods

Name Description
triggerAnimIn() => boolean start the in animation, will go to idle animation after
triggerAnimOut() => boolean start the out animation

Events

Name Detail Description
bolt-animate:end:in {} Indicates when the in animation concluded
bolt-animate:end:out {} Indicates when the out animation concluded

In, Idle, Out

In

Idle, Out

Out

In, Out

In, Idle

Idle

Build Ins

in="none"

none


in="fade-in"

fade-in


in="slide-down"

slide-down


in="fade-in-slide-up"

fade-in-slide-up


in="fade-in-slide-down"

fade-in-slide-down


in="fade-in-slide-left"

fade-in-slide-left


in="fade-in-slide-right"

fade-in-slide-right


in="fade-in-fade-out"

fade-in-fade-out


Build Outs

out="none"

none


out="fade-out"

fade-out


out="fade-out-slide-up"

fade-out-slide-up


out="slide-up"

slide-up


out="fade-out-slide-down"

fade-out-slide-down


out="fade-out-slide-left"

fade-out-slide-left


out="fade-out-slide-right"

fade-out-slide-right


2.8.0-beta.4

Editor

Next Generation live editor for Bolt Web Components

Bolt Editor

  {% set content %}
  <bolt-text>Hello World!</bolt-text>
{% endset %}

{% include '@bolt-components-editor/editor.twig' with {
  styles: ['/build/bolt-global.css'],
  scripts: ['/build/bolt-global.js'],
  content: content,
} 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)
content *

HTML content to edit

string
styles *

URL paths to CSS files that the editable content requires

array
scripts *

URL paths to JS files that the editable content requires

array
id

ID for this content. Useful for saving back to a data store like Drupal by passing in the paragraph ID. ID emitted in save event.

string

Events

Name Detail Description
editor:save { html: string } After the editor is saved, all the html is available in the event detail. const editors = document.querySelectorAll('.js-pega-editor'); editors.forEach(editor => { editor.addEventListener('editor:save', event => { console.log('Editor saved HTML:', event.detail.html); }); });
Edit
This is a Button; click "Edit" above to edit me
Edit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Micro Journeys

A collection of Web Components for animated storytelling

See a demo of the Micro Journeys with Editor in a full page

Character Docs

Usage

  <bolt-character size="small"></bolt-character>

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
size *

Character Size.

string small
  • small, medium, large
characterImage

Pre-defined package image.

string customer-happy
  • customer-happy, customer-neutral, customer-sad, customer-surprise, pega-rep, u-comm-plus, custom
characterCustomUrl

URL of a custom image.

string https://www.fillmurray.com/g/200/200
useIcon

Use a bolt-icon in place of an image Url.

boolean

Slots

Name Requred? Description
top No
right No
bottom No
left No
Edit
Slot: top Slot: left Slot: right Slot: bottom

I'm a small character

Slot: left Slot: right Slot: bottom

I'm a medium character

I'm a large character

Bill is due!

Connection Docs

<bolt-connection size="small"></bolt-connection>

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)
speed

Speed of the animation, typically rotation.

string 1000
animType

Type of predefined animated SVG to use.

string connectionBand
  • connectionBand or tripleConnectionBand
direction

Direction of animation, currently only available on Connection Band

string left
  • left or right
Edit
top bottom

Status Dialogue Bar Docs

<bolt-status-dialolgue-bar size="small"></bolt-status-dialolgue-bar>

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
iconName

Icon name.

string
  • NULL, academy, add-open, add-solid, agile, app-development, app-exchange, arrow-left, asset-data, asset-infographic, asset-interactive, asset-link, asset-media, asset-podcast, asset-presentation, asset-text, asset-video, bolt-logo-colored, brand-operations, calendar, careers, case-management, chart-bar, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-circled, close-open, close-solid, cloud, co-browse, communications, copy-to-clipboard, credit-card, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exclamation, exit-full-screen, external-link, eye, eye-off, face-happy, face-sad, facebook, facebook-solid, field-service, field-service-gray, filter, financial, full-screen, github, global, government, healthcare, hospitality, industries, info-open, info-solid, insurance, integration, intelligent-virtual-assistant, java, knowledgebase, launchpad, life-sciences, linkedin, linkedin-solid, lock, manufacturing, map-pin, map-pin-solid, marketing, marketing-gray, menu, minus-open, minus-solid, mobility, more, omni-channel, partners, pencil, platform, podcast, print, product, product-delivery, refresh, reporting, retail, robo-auto, sales-automation, scalability, search, share, star-solid, support, system-admin, training, transportation, twitter, twitter-solid, unlock, upload, user, user-interface, video, vision, warning, watch, workforce-intelligence, youtube-solid
isAlertMessage

Is this an alert message? Changes it to error red.

boolean false
dialogueArrowDirection

Direction of the dialogue arrow direction.

string none
  • up, down, left, right, none
Edit

Hey now!

Bill almost due

Bill almost due

Bill almost due!! Take action now before this text wraps to another line.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolores fuga in ipsum minus modi nihil nulla odit recusandae sapiente! Aspernatur inventore minima nobis odio reprehenderit? Aliquam laudantium quos repudiandae.

Up Arrow

Down Arrow

Left Arrow

Right Arrow

Icon Group Docs

<bolt-icon-group icon-one-name="eye" icon-two-name="eye" icon-three-name="eye" icon-color="teal"></bolt-icon-group>

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
iconOneName

Name of first icon.

string eye
  • NULL, academy, add-open, add-solid, agile, app-development, app-exchange, arrow-left, asset-data, asset-infographic, asset-interactive, asset-link, asset-media, asset-podcast, asset-presentation, asset-text, asset-video, bolt-logo-colored, brand-operations, calendar, careers, case-management, chart-bar, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-circled, close-open, close-solid, cloud, co-browse, communications, copy-to-clipboard, credit-card, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exclamation, exit-full-screen, external-link, eye, eye-off, face-happy, face-sad, facebook, facebook-solid, field-service, field-service-gray, filter, financial, full-screen, github, global, government, healthcare, hospitality, industries, info-open, info-solid, insurance, integration, intelligent-virtual-assistant, java, knowledgebase, launchpad, life-sciences, linkedin, linkedin-solid, lock, manufacturing, map-pin, map-pin-solid, marketing, marketing-gray, menu, minus-open, minus-solid, mobility, more, omni-channel, partners, pencil, platform, podcast, print, product, product-delivery, refresh, reporting, retail, robo-auto, sales-automation, scalability, search, share, star-solid, support, system-admin, training, transportation, twitter, twitter-solid, unlock, upload, user, user-interface, video, vision, warning, watch, workforce-intelligence, youtube-solid
iconTwoName

Name of second icon.

string eye
  • NULL, academy, add-open, add-solid, agile, app-development, app-exchange, arrow-left, asset-data, asset-infographic, asset-interactive, asset-link, asset-media, asset-podcast, asset-presentation, asset-text, asset-video, bolt-logo-colored, brand-operations, calendar, careers, case-management, chart-bar, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-circled, close-open, close-solid, cloud, co-browse, communications, copy-to-clipboard, credit-card, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exclamation, exit-full-screen, external-link, eye, eye-off, face-happy, face-sad, facebook, facebook-solid, field-service, field-service-gray, filter, financial, full-screen, github, global, government, healthcare, hospitality, industries, info-open, info-solid, insurance, integration, intelligent-virtual-assistant, java, knowledgebase, launchpad, life-sciences, linkedin, linkedin-solid, lock, manufacturing, map-pin, map-pin-solid, marketing, marketing-gray, menu, minus-open, minus-solid, mobility, more, omni-channel, partners, pencil, platform, podcast, print, product, product-delivery, refresh, reporting, retail, robo-auto, sales-automation, scalability, search, share, star-solid, support, system-admin, training, transportation, twitter, twitter-solid, unlock, upload, user, user-interface, video, vision, warning, watch, workforce-intelligence, youtube-solid
iconThreeName

Name of third icon.

string eye
  • NULL, academy, add-open, add-solid, agile, app-development, app-exchange, arrow-left, asset-data, asset-infographic, asset-interactive, asset-link, asset-media, asset-podcast, asset-presentation, asset-text, asset-video, bolt-logo-colored, brand-operations, calendar, careers, case-management, chart-bar, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-circled, close-open, close-solid, cloud, co-browse, communications, copy-to-clipboard, credit-card, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exclamation, exit-full-screen, external-link, eye, eye-off, face-happy, face-sad, facebook, facebook-solid, field-service, field-service-gray, filter, financial, full-screen, github, global, government, healthcare, hospitality, industries, info-open, info-solid, insurance, integration, intelligent-virtual-assistant, java, knowledgebase, launchpad, life-sciences, linkedin, linkedin-solid, lock, manufacturing, map-pin, map-pin-solid, marketing, marketing-gray, menu, minus-open, minus-solid, mobility, more, omni-channel, partners, pencil, platform, podcast, print, product, product-delivery, refresh, reporting, retail, robo-auto, sales-automation, scalability, search, share, star-solid, support, system-admin, training, transportation, twitter, twitter-solid, unlock, upload, user, user-interface, video, vision, warning, watch, workforce-intelligence, youtube-solid
iconColor

Color of all icons.

string teal
iconBackgroundColor

Background color of all icons.

string white
Edit

WIP

Edit
How Pega technology resolves

Simple Steps


Shadow DOM – yes:☝️ no:👇


How Pega technology resolves

Simple Steps

Edit
How Pega technology resolves Company

You are about to reach
your monthly data limit...

Customer
To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

Why is my bill so high? Let me check.

Customer billing view
If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

Customer is 79% likely to call
about their bill.

Company

Offer to waive late fee.

Customer
Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action

You have a data roaming charge and a late fee. Would you like to waive the late fee?

Agent view of billing charges

Why is my bill so high?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half
Proactive customer service. Streamlined billing inquiries. Start delivering all of this and more with Pega Customer Service™.
Explore our industry-leading software
Learn more about intelligent guidance
Sign up for an upcoming demo

You have a data roaming charge and a late fee. Would you like to waive the late fee?

Agent view of billing charges

Why is my bill so high?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half
Company

You are about to reach
your monthly data limit...

Customer
To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

Why is my bill so high? Let me check.

Customer billing view
If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

Customer is 79% likely to call
about their bill.

Company

Offer to waive late fee.

Customer
Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action
Proactive customer service. Streamlined billing inquiries. Start delivering all of this and more with Pega Customer Service™.
Explore our industry-leading software
Learn more about intelligent guidance
Sign up for an upcoming demo

Shadow DOM – yes:☝️ no:👇


How Pega technology resolves Company

You are about to reach
your monthly data limit...

Customer
To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

Why is my bill so high? Let me check.

Customer billing view
If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

Customer is 79% likely to call
about their bill.

Company

Offer to waive late fee.

Customer
Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action

You have a data roaming charge and a late fee. Would you like to waive the late fee?

Agent view of billing charges

Why is my bill so high?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half
Proactive customer service. Streamlined billing inquiries. Start delivering all of this and more with Pega Customer Service™.
Explore our industry-leading software
Learn more about intelligent guidance
Sign up for an upcoming demo

You have a data roaming charge and a late fee. Would you like to waive the late fee?

Agent view of billing charges

Why is my bill so high?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half
Company

You are about to reach
your monthly data limit...

Customer
To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

Why is my bill so high? Let me check.

Customer billing view
If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

Customer is 79% likely to call
about their bill.

Company

Offer to waive late fee.

Customer
Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action
Proactive customer service. Streamlined billing inquiries. Start delivering all of this and more with Pega Customer Service™.
Explore our industry-leading software
Learn more about intelligent guidance
Sign up for an upcoming demo
Edit
Company

You are about to reach
your monthly data limit...

Customer
To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

Shadow DOM – yes:☝️ no:👇


Company

You are about to reach
your monthly data limit...

Customer
To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals
Edit

Why is my bill so high? Let me check.

Customer billing view
If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

Shadow DOM – yes:☝️ no:👇


Why is my bill so high? Let me check.

Customer billing view
If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.
Edit

Customer is 79% likely to call
about their bill.

Company

Offer to waive late fee.

Customer
Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action

Shadow DOM – yes:☝️ no:👇


Customer is 79% likely to call
about their bill.

Company

Offer to waive late fee.

Customer
Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action
Edit

You have a data roaming charge and a late fee. Would you like to waive the late fee?

Agent view of billing charges

Why is my bill so high?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

Shadow DOM – yes:☝️ no:👇


You have a data roaming charge and a late fee. Would you like to waive the late fee?

Agent view of billing charges

Why is my bill so high?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?
Edit

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half

Shadow DOM – yes:☝️ no:👇


Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half

SVG Animations

Triple Band, Left

Triple Band, Right

Connection Band, Left

Radar Dark

Radar Light

Orbit

Automation

@bolt-components-self-drawing-circle/self-drawing-circle.twig

How Pega technology delivers 1-to-1 customer engagement

Problem: High credit card fees

Frank has a high-interest card and is accruing lots of additional fees.

$96
Annual Fee
29%
APR

Rising frustration

Frank begins to be frustrated by being hit with high interest and fees, and starts to explore other card options from other banks.

Lost Business

Frank calls customer service to cancel his card.

Without Pega

Customer needs go unmet

Customer Outcome

  • Financial Hardship
  • Poor Experience
  • Service Frustration

Business Outcome

  • Customer Churn
  • Lost Revenue
  • Competitor is Stronger

Problem: High credit card fees

Frank has a high-interest card and is accruing lots of additional fees.

Recognize the signals

Business uses propensity modeling to understand likelihood of Frank canceling his credit card, based on intent signals and payment patterns.

Respond in real time

To avoid Frank canceling his card, business presents offer of a card with a lower rate that better fits his needs (lower APR).

$0
Annual Fee
14.7%
APR

Retain a valuable relationship

Frank accepts the new offer and feels better about his financial situation. He's more likely to stay a customer long-term.

With Pega

Recognize. Resolve. Retain.

Customer Outcome

  • Better Product Fit
  • Improved Experience
  • Higher Satisfaction

Business Outcome

  • Avoid Churn
  • Retained Revenue
  • Higher Customer Lifetime Value (CLV)

How can you transform customer relationships with Pega?