animate docs

2.9.2

Animate

Animations for Bolt Design System

Published

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

Overview

The Bolt Animate Component

Usage

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

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)
InitialAppearance string hidden
  • default, 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 350
  • —
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

animate

In, Idle, Out

In

Idle, Out

Out

In, Out

In, Idle

Idle

animate build stages

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

editor docs

2.9.2

Editor

Next Generation live editor for Bolt Web Components

Published

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

Overview

Bolt Editor

Usage

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

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)
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); }); });

editor simple

Edit
This is a Button; click "Edit" above to edit me

editor blockquote

Edit

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

editor modal

Edit
This is a Button triggering an on-page Modal This is a Link triggering an on-page Modal

micro journey docs

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

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 false
  • —

Slots

Name Requred? Description
top No
right No
bottom No
left No

character

Edit
Slot: top Slot: left Slot: right Slot: bottom

character kitchen sink

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

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, tripleConnectionBand
Direction

Direction of animation, currently only available on Connection Band

 string left
  • left, right

connection

Edit
top bottom

status dialogue bar docs

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 mobility
  • 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

status dialogue bar

Edit

Hey now!

status dialogue bar kitchen sink

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

Icon Group Docs

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

icon group

Edit
Horizontal Icon Group Vertical Icon Group

micro journeys solo

Toggle light/dark theme
Edit
How Pega technology resolves

Simple Steps

Shadow DOM – yes:☝️ no:👇

How Pega technology resolves

Simple Steps

micro journeys

Toggle light/dark theme
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

step 1 demo

Toggle light/dark theme
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

step 2 demo

Toggle light/dark theme
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.

step 3 demo

Toggle light/dark theme
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

step 4 demo

Toggle light/dark theme
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”?

step 5 demo

Toggle light/dark theme
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 docs

svg animations

SVG Animations

Triple Band, Left

Triple Band, Right

Connection Band, Right

Radar

Orbit

Automation

SVG Animations- Dark Versions

Automation

Orbit

Radar Dark

Connection Band Left

self drawing circle

Trigger Self-Drawing Circle

with without

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.

See it in action

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.

See it in action

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?
DON'T TREAD ON ME

with without no shadow dom

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.

See it in action

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.

See it in action

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?

with without intersection test

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.

See it in action

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.

See it in action

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?
DON'T TREAD ON ME

with without overlay animation test

Trigger Overlay Fade-Out with triggerAnimationOut Trigger Overlay Fade-Out with triggerAnims