Action blocks

Stylistic block layout for displaying actionable icon and text. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-action-blocks

Description

Action blocks work as a group to provide the user an easy to browse list of options of relativeto take action to discover more information. They commonly exist as links to more detailed content.

Best Practices

  • Can use xlight, light, dark, and xdark themes.
  • Can have an image, icon, and/or text
  • Should link to content
  • Should be limited to 7 (soft limit) unless we're representing a large list of content that is meant to be scanned
  • Can wrap to many rows
  • Top aligned by default
  • Can be vertically centered
  • Are set with a border by default
  • Can be borderless
  {% include "@bolt-components-action-blocks/action-blocks.twig" with {
  contentItems: [
    {
      text: "Item 1",
      url: "#!",
      icon: {
        name: "icon-name",
        size: "large",
        background: "circle"
      }
    },
    {
      text: "Item 2",
      url: "#!",
      icon: {
        name: "icon-name",
        size: "large",
        background: "circle"
      }
    },
    {
      text: "Item 3",
      url: "#!",
      icon: {
        name: "icon-name",
        size: "large",
        background: "circle"
      }
    }
  ]
} only %}
Name Type Value(s) Description Default
attributes object

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

N/A
maxItemsPerRow number
- [2 ~ 12]

Number of items to place in a row before beginning a new row.

3
align string
  • top, center, bottom

Alignment of action block content.

top
border boolean

Display a border around the action blocks.

true
contentItems array
  • [items]:
    • Type: object
    • Properties:
      • text
        • Type: string
      • url
        • Type: string
      • icon
        • Type: object
        • Properties:
          • name
          • size
          • background

Content items to populate the action blocks.

N/A

Background shapes

A grid of colored vector shapes for use in backgrounds. Part of the Bolt “Components” CSS framework that powers the Bolt Design System. This component will likely not be used on its own, but rather will be a dependency of another component that includes it.

Install via NPM
npm install @bolt/components-background-shapes

Description

Background shapes bring the brand further into Bolt. These shapes create a background texture for bands. The shapes are offset at an angle offset inside a band component.

Best Practices

  • Set to the right side of the band if there is copy on the left.
  • Set to the left side of the band if there is copy on the right.
  • Shapes can be used behind cards or thumbnail images (video or just image) but should not make the content hard to consume by the user.
  • Shapes should not be used behind any text elements. Doing so makes the text hard to read.
  • Don't use background shapes if it makes the content in the band hard to parse
  {% include "@bolt-components-background-shapes/background-shapes.twig" with {
  shapeGroup: "B"
} only %}
Name Type Value(s) Description Default
shapeGroup string
  • A OR B

The shapeGroup to use to build the shapes layout.

A
square-square
Outline Circle
square-square
Little Circle
circle-circle
Outline Circle

shapeGroup: A

circle-square
Outline Circle
square-square
Little Circle
square-square
Little Circle

shapeGroup: B

square-square
Outline Circle
square-square
Little Circle
circle-circle
Outline Circle

Bolt Background

Background can be added to any container. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-background

Description

Background allows Bolt to set an images inside of bands.

  • Can set an image inside the band
  • Can set background shapes
  • Can set focus on the left
  • Can set focus on the right
  • Can set light, medium, or heavy opacity
  • Can set a left, right, or center gradient
  {% include "@bolt-components-background/background.twig" with {
  opacity: "heavy",
  fill: "gradient",
  focalPoint: {
    vertical: "center",
    horizontal: "center"
  },
  contentItems: [
    {
      pattern: "image",
      src: "/images/content/backgrounds/background-tall-4.jpg"
    }
  ]
} only %}
Name Type Value(s) Description Default
attributes object

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

N/A
opacity string
  • light, medium, heavy

Overlay opacity

medium
overlay string
  • enabled OR disabled

Should an overlay be used for this background.

enabled
shapeGroup string
  • A, B, none

Add a Bolt Background Shapes group.

N/A
shapeAlignment string
  • left OR right

Alignment of shape group.

right
fill string
  • color OR gradient

Type of fill to use for the overlay.

N/A
focalPoint object
    • horizontal

      Currently only reverses gradient on 'left'.

      • center, left, right
    • vertical

      Currently doesn't use this value. Intended future application.

      • center, top, bottom

Where the opacity background should originate.

N/A
contentItems array
  • [items]:
    • Type: object
    • Properties:

An array of objects to place in the background.

N/A

Light Opacity

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Medium Opacity

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Heavy Opacity

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Heavy Opacity with Left Focal Point

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Heavy Opacity with Right Focal Point

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Background Shapes: Shape Group A

circle-square
Outline Circle
square-square
Little Circle
square-square
Little Circle

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Background Shapes: Shape Group B

square-square
Outline Circle
square-square
Little Circle
circle-circle
Outline Circle

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Background Shapes: Shape Group A, Alignment Left

circle-square
Outline Circle
square-square
Little Circle
square-square
Little Circle

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Fill: Color

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Fill: Gradient

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Bolt Band

Band is a panel with vertical spacing. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-band

Description

Bands are full width sections that go edge to edge of the display and typically denote a collective section of a page. Bands can contain many page elements and components.

Bands also define what theme the contents follow. For example, a dark theme with have an indigo background with a yellow primary button.

Bands are defined content areas where content hangs together.

Best Practices

  • Bands are full width divs and leverage the page wrapper to constrain content inside of it
  • Don't have partial width bands
  • Choose from different themes: xlight, light, dark, xdark
  • Optionally include a background image (see background)
  • Optionally can include a gradient
  • Has grid set inside of it
  • Can have many components inside of it like teaser on one side and card on the other with background shapes behind the card
  • Make sure the content inside a band hangs together
  • Introduce content in a band that doesn't hang with other content
  {% include "@bolt-components-band/band.twig" with {
  content: "Example Band Content",
} only %}
Name Type Value(s) Description Default
attributes object

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

N/A
fullBleed boolean

If set to true, the band will take the full width of the page.

N/A
size string
  • xsmall, small, medium, large, none

Height of the band.

medium
contentTag string
  • div, article, section, header, footer, nav, figcaption

Html tag to use for the band's content.

N/A
theme string
  • xlight, light, dark, xdark, none

Bolt theme.

dark
row_gutter string
  • none, small, medium, large

Configures the amount of vertical whitespace in-between each <bolt-grid-item> in the nested <bolt-grid> component.. Defaults to small when there's more than than 1 item in the items array, otherwise defaults to none. Shares the same row_gutter config options as the grid component.

small / none
content_row_start string

Configures which row the Band Component's legacy content Twig block should be 'automatically' displayed on. Under the hood, this identical to the Grid Item's row_start config.

2
items array
    • content

      Content to render inside each <bolt-grid-item>

    • position

      Layout-specific config options for each internal <bolt-grid-item>

      • @bolt-components-grid/grid-item.schema.yml > Object details
        • attributes

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


          Type: object
        • align

          Horizontal alignment of the grid item itself


          Type: string
          • start, center, end
        • valign

          Vertical alignment of the grid item itself


          Type: string
          • start, center, end
        • column_start

          The general column the grid item should start on. For example, a with the attributes columns="3" start-column="2" would start on the 2nd column and extend for 3 columns so it would span the 2nd, 3rd and 4th column.


          Type: string
        • column_end

          The general column the grid item should stop on. For example, a with the attributes start-column="2" end-column="3" would start on the 2nd column and extend until the 3rd column.


          Type: string
        • column_span

          The number of columns the should span across


          Type: string
        • row_start

          Specifies a grid item’s start position within the grid row


          Type: string
        • row_end

          Specifies a grid item’s ending position within the grid row


          Type: string
        • row_span

          Specifies the number of rows a should span across


          Type: string

Array of content items to display inside the band component. Internally this uses the new <bolt-grid> component to handle layout.

N/A

band

Example Band Content

Example Headline

Example Subheadline

Size: xsmall

This band is size xsmall

Size: small

This band is size small

Size: medium

This band is size medium

Size: large

This band is size large

Size: none

This band is size none

Band: Flag with One Button

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Band: Flag with Two Buttons

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Band: Flag with Two Long Buttons

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Theme: xlight

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Theme: light

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Theme: dark

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Theme: xdark

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Theme: none

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Band: Collection

2017 Forrester Wave Report

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Pega 7 for Operations

Simplify and automate to reduce costs and improve agility.

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Band: Card Collection

2017 Forrester Wave Report

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Headline #2

Simplify and automate to reduce costs and improve agility.

Headline #3

Simplify and automate to reduce costs and improve agility.

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

What's Trending

Pega Events

Customer Engagement Summit Detroit

Hear insights. Make connections. Drive innovation.

^ via Twig embed, separate content field, uses band_content Twig block.

Pega Events

Customer Engagement Summit Detroit

Hear insights. Make connections. Drive innovation.

^ via Twig Include, items array separate from content field

Pega Events

Customer Engagement Summit Detroit

Hear insights. Make connections. Drive innovation.

^ via Twig Include, combined content into single items array, doesn't use content field

Block List

Block list for stacked full-width content. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-block-list
  {% include "@bolt-components-block-list/block-list.twig" with {
  items: [
    include("@bolt-components-link/link.twig", {
      text: "Link 1",
      url: "#!",
      icon: {
        name: "chevron-right",
        position: "before"
      }
    }),
    include("@bolt-components-link/link.twig", {
      text: "Link 2",
      url: "#!",
      icon: {
        name: "chevron-right",
        position: "before"
      }
    }),
    include("@bolt-components-link/link.twig", {
      text: "Link 3",
      url: "#!",
      icon: {
        name: "chevron-right",
        position: "before"
      }
    }),
    "Simple text example"
  ]
} only %}
Name Type Value(s) Description Default
attributes object

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

N/A
items array

The content items

All of the items in the block list - can have simple text or items

N/A

Theme: xlight


Theme: light


Theme: medium


Theme: dark


Theme: xdark


Blockquote

Stylistic pull quote styles for all types of layout. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-blockquote

Description

Block quotes provide testimonials throughout the pega experience.

Content that can be contained in a blockquote

  • Logo or image (optional)
  • Quote
  • Attributor image (optional)
  • Attributor name (optional)
  • Attributor title (optional)
  • Attributor company (optional)

Additional info

  • Can be full width or confined with the grid
  • Can be left, center, or right aligned
  • can have top+bottom horizontal lines, a left or right vertical line, or no lines
  • Text is open sans
  • Quote marks are NOT inch marks
  • Quote marks are system font Georgia
  • Text color changes based on the theme colors
  {% include "@bolt-components-blockquote/blockquote.twig" with {
  content: "

The greater danger for most of us lies not in ... achieving our mark.

" } only %}
Name Type Value(s) Description Default
attributes object

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

N/A
content* string

Text to appear in blockquote.

N/A
size string
  • large, xlarge, xxlarge

Text size.

xlarge
alignItems string
  • left, center, right

Aligns items left, center, or right.

left
border string
  • vertical, horizontal, none

Add a border.

vertical
indent boolean

Indent text.

false
fullBleed boolean

Width of the brower window.

false
logo object
  • @bolt-components-logo/logo.schema.yml > Object details
    • invert

      Set to true to invert the logo colors.


      Type: boolean

Add a logo component.

N/A
author object
    • name

      Author's name.

    • title

      Author's title.

    • image
      • @bolt-components-image/image.schema.yml > Object details
        • src

          Source url for image.


          Type: string
        • alt

          Alt tag for image.


          Type: string
        • lazyload

          Lazyload can boost performance by loading images on demand, instead of on initial page load.


          Type: boolean
          • TRUE OR FALSE
        • srcset

          A comma seperated string of image urls and image widths, used for optimizing image loading performance.


          Type: string
        • sizes

          A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of a media condition (omitted for the last item), and a source size value.


          Type: string
        • useAspectRatio

          Use the ratio wrapper around the image to maintain a specific image ratio. This ratio is either determined from the image, or by passing in height and width arguements.


          Type: boolean
          • TRUE OR FALSE
        • width

          Override the default width of the image. If no height is provided, aspect ratio will be maintained.


          Type:
        • height

          Override the default height of the image. If no width is provided, aspect ratio will be maintained.


          Type:

Author of the quote.

N/A

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

alignItems: left

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

alignItems: center

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

alignItems: right

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Indent: True

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Indent: False

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Border: vertical

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Border: horizontal

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Border: none

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Multiple Paragraph Content

Blockquote can have one paragraph. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus.

Or it can have multiple paragraphs. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci.

theme: xlight

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

theme: light

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

theme: dark

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

theme: xdark

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Breadcrumb

Stylistic pull quote styles for all types of layout. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-breadcrumb
  {% include "@bolt-components-breadcrumb/breadcrumb.twig" with {
  contentItems: [
    include("@bolt-components-link/link.twig", {
      text: "Home",
      url: "#!"
    }),
    include("@bolt-components-link/link.twig", {
      text: "Landing Page",
      url: "#!"
    }),
    include("@bolt-components-link/link.twig", {
      text: "Sub Page",
      url: "#!"
    }),
    "Current Page"
  ]
} only %}
Name Type Value(s) Description Default
attributes object

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

N/A
contentItems array

Breadcrumb pieces.

N/A

Breadcrumb Component in a Band ^

The above example shows a xsmall band containing the breadcrumbs.

Eyebrow

Headline

Subheadline

Body text.

Breadcrumb Band Stacking On Top of Featured Band ^

The above example shows a small band containing the breadcrumbs and large band containing the content. Both have theme set to none.

Background and Theming

There is an outer band containing the breadcrumb band and the featured band, background and theme should be set on that outer band.

Digital Transformation

Be Future Empowered

Start with the outcomes you want.

Digital transformation is more than a slick new mobile app. It demands the hard work of designing for customer outcomes. Pega software gives you the power to truly transform.

Breadcrumb Band Stacking On Top of Featured Band with Outer Background Band ^

The above example shows a small band containing the breadcrumbs and large band containing the content. Both have theme set to none.

Background and Theming

A background image is set on the outer band and the theme is set to dark.

Digital Transformation

Be Future Empowered

Start with the outcomes you want.

Digital transformation is more than a slick new mobile app. It demands the hard work of designing for customer outcomes. Pega software gives you the power to truly transform.

Breadcrumb Band Stacking On Top of Featured Band (individually themed)^

The above example shows a xsmall band containing the breadcrumbs and large band containing the content.

Background and Theming

No background or theme is set on the outer band in this case because it's not neccessary.

Bolt Button

Buttons are the core of our action components.

Loading...

Button is a branded component to convey call to action. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-button

Description

Buttons are the core of our action components. Their affordance is immediate and can be use for most actions and allow users to access the target with a single interaction. Buttons clearly provide a next step for the user.

Our Buttons depend on the theme they are contained in and change in appearance based on said theme. The themes and button colors were designed together to ensure the proper amount affordance and clarity.

Xlight and light themes

  • Primary: Light Indigo container with white text
  • Secondary: white button with indigo text
  • Text button: Light indigo text with chevron

Dark and xdark themes

  • Primary: Yellow container with default indigo text
  • Secondary: white button with indigo text
  • Text button: white text with chevron

  • Currently only have one defined size (though other options can and will be defined in the future)

  • Can be 100% width of the wrapper for mobile or card instances
  • Can optionally be 100% width. For example, the button has default width of 2 rem on either side on larger screens but full width on smaller screens

Dos

  • CTAs must be clearly and succinctly labeled with a next step
  • CTA should lead with strong action verbs
  • The primary CTA should be the most important action.
  • Be consistent in placement based on the screen size and device
  • Fall back to the text button in secondary and tertiary content areas where you can. For example, cards with a button use the text style so that a filled button doesn't become overwhelming and redundant.
  • Follow theming rules

Don'ts

  • Don't clutter the page with too many buttons
  • Don't mix and match themes and their button colors. For example, do not use the indigo button on dark and xdark themes as the indigo button does not stand out enough.
  • Don't mix and match colors outside the theme, see button groups.
  {% include "@bolt-components-button/button.twig" with {
  text: "Example Button"
} only %}

Buttons are the core of our action components.

Name Type Value(s) Description Default
attributes object

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

N/A
text* string

Button Text

The text displayed inside a button

N/A
transform string
  • uppercase, lowercase, capitalize, none

Text transformation.

none
icon object
  • @bolt-components-icon/icon.schema.yml > Object details
    • name

      Icon name.


      Type: string
      • 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, check-circle, check-solid, check, chevron-down, chevron-left, chevron-right, chevron-up, close-open, close-solid, close, cloud, co-browse, communications, copy-to-clipboard, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exit-full screen, external-link, eye-off, eye, facebook-solid, facebook, field-service-gray, field-service, 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-solid, linkedin, lock, manufacturing, map-pin-solid, map-pin, marketing-gray, marketing, 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-solid, twitter, unlock, upload, user, user-interface, video, vision, warning, watch, workforce-intelligence, youtube-solid
    • background

      Background shape. This applies only to 'xlarge' icons.


      Type: string
      • circle OR square
    • size

      Icon size.


      Type: string
      • small, medium, large, xlarge
    • color

      Icon color. Currently only support default (black) and teal.


      Type: string
      • teal OR blue

Icon data as expected by the icon component. Accepts an additional 'position' parameter that determines placement within the button.

N/A
tag string
  • a, link, button, submit, reset

Semantic tag

What should this element semantically be?

button
size string
  • xsmall, small, medium, large, xlarge

Button Size

How large is this button?

medium
itemAlignment

DEPRECATED

Use the align parameter instead.

N/A
align string
  • start, center, end

Button Alignment

How should content be horizontally aligned? Note: the values left and right are DEPRECATED, use start and end instead.

center
style string
  • primary, secondary, text

Button Style

What's the button style / theme?

primary
width string
  • full OR full@small

Button Width

Should a button be full width, it's default size, or full width, but only on smaller screens?

N/A
rounded

DEPRECATED

Use the border_radius parameter instead

N/A
border_radius string
  • regular OR full

Border Radius

Amount of rounding that the corners of the button should have

regular
iconOnly boolean

Icon Only?

Is this an icon-only button (with visually hidden text)?

false

Button Border Radius Variation: regular

Button Border Radius Variation: full

Button Size Variation: xsmall

Button Size Variation: small

Button Size Variation: medium

Button Size Variation: large

Button Size Variation: xlarge

Primary Button States

Secondary Button States

Text Button States

Button theme: xdark

Button theme: dark

Button theme: light

Button theme: xlight

Button Width Variations: full

Button Width Variations: full@small

Button Tag: a

a-tag based Button

Button Tag: link

link-tag based Button

Button Tag: button

Button Tag: submit

Button Tag: reset

Align: start

Align: center

Align: end

Transform: uppercase

Transform: lowercase

Transform: capitalize

Transform: none

Button w/ Icon Position before



Button w/ Icon Position after



Button w/ Default Icon Position

Icon-only buttons display just an icon + visually hidden text if any text content is defined.

Icon Only? True Icon Only? False
Simple primary button
Simple secondary button
Simple text button
Simple primary button-link
Secondary disabled
Button with 1 slotted icon
Button with 2 slotted icons

Button Group

Button-group can contain multiple buttons. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-button-group

Description

Button groups are a horizontal set of actions with a hierarchy that defines the spacing and their relationship between each other. This set of actions help people under stand their options with potential next steps.

Button padding left is 1rem when there are multiple buttons in a horizontal row.

Dos

  • Follow the button component guidelnes
  • Separate buttons by 1rem
  • Make sure the CTAs have a relationship with each other. If they don't reevaluate the content structure.
  • Be sure to consider the horizontal group of actions in smaller, less optimal sizes.
  • Be sure to determine the hierarchy of the CTAs in the group. These patterns are good:
    • Primary + secondary + text button
    • Secondary + text button
    • Primary + text button

Don'ts

  • Don't have multiple primary buttons grouped together
  • Don't have LESS than 1rem separating buttons
  • Don't have MORE than 1rem separating buttons
  • Don't have CTAs grouped together that do not relate to one another.

NOTE: We currently do not have joined buttons (eg, no gap, single button with two sides), but this is something to consider moving forward.

  {% include "@bolt-components-button-group/button-group.twig" with {
  buttons: [
    {
      text: "Learn More",
      style: "primary"
    },
    {
      text: "About Pega",
      style: "secondary"
    }
  ]
} only %}
Name Type Value(s) Description Default
tag string
  • ul OR ol

Html tag to wrap the button group.

N/A
buttons array
  • [items]:
    • Type: object

      Bolt button information.

    • Properties:

An array of button objects.

N/A
contentItems array
  • [items]:
    • Type: object

      Bolt component information.

    • Properties:

Content items.

An array of bolt objects.

N/A
content string

A string of content to place in the button group.

N/A

1 Button(s)

2 Button(s)

3 Button(s)

4 Button(s)

5 Button(s)

This is text with the tags stripped.

Card

Install via NPM
npm install @bolt/components-card

Description

The preview card presents users as a way of taking action to discover more information. They commonly exist as links to more detailed long-form content, links off-site, and occasionally inline videos.

Best Practices

  • Placement should be in a manner where it is easily scannable
  • The headline should call out what the benefit is of clicking through
  • Avoid cluttering a card with too many calls to action
  • If the headline can work as link affordance without a button, don't have a button
  • If the headline does not clearly invoke action, use a CTA at the bottom of the card to entice the user
  {% include "@bolt-components-card/card.twig" with {
  tag: "article",
  contentTag: "div",
  contentItems: [
    {
      pattern: "image",
      src: "/images/sample/anthem-video.jpg",
      alt: "Anthem Video"
    },
    {
      pattern: "eyebrow",
      text: "Video"
    },
    {
      pattern: "headline",
      tag: "h3",
      size: "large",
      text: "Anthem: Service Desktop"
    },
    {
      pattern: "text",
      text: "Anthem debuts its next-generation service desktop, driving frictionless customer experiences."
    },
    {
      pattern: "button",
      width: "full",
      text: "Get the report"
    }
  ]
} only %}
Name Type Value(s) Description Default
tag string
  • div, article, section, figure

Html tag immediately within the bolt-card element.

N/A
contentTag string
  • div, article, section, figcaption

Html tag immediately within the bolt-card element.

N/A
theme string
  • xlight, light, dark, xdark

Bolt theme.

N/A
url string

Providing a URL will make the entire card link to another resource. This is a future prop and does not do anything right now.

N/A

card

Anthem VideoAnthem Video

Video

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.
Anthem VideoAnthem Video

Video

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Video

Video Meta Title Goes Here.

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.
Anthem VideoAnthem Video

Body text. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Cards in a band

Anthem VideoAnthem Video

Eyebrow

Headline

Body text. Anthem debuts its next-generation service desktop, driving frictionless customer experiences.
Anthem VideoAnthem Video

Remove Eyebrow and Button

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Remove Image, Eyebrow, and Button

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Individual themed cards in a band

Anthem VideoAnthem Video

Video

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.
Anthem VideoAnthem Video

Video

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.
Anthem VideoAnthem Video

Video

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Individual themed cards in a band w/ background image

Anthem VideoAnthem Video

Video

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.
Anthem VideoAnthem Video

Video

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.
Anthem VideoAnthem Video

Video

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Non-themed cards in a band w/ background image

Anthem VideoAnthem Video

Video

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.
Anthem VideoAnthem Video

Video

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.
Anthem VideoAnthem Video

Video

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Personalized card test, client-rendered, with a large delay

Before:

Anthem VideoAnthem Video

Video

Personalized card, client-rendered, with a large delay (before)

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

After:

Anthem VideoAnthem Video

Video

Personalized card, client-rendered, with a large delay (after)

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Personalized card test, client-rendered, with a small delay

Before:

Anthem VideoAnthem Video

Video

Personalized card, client-rendered, with a small delay (before)

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

After:

Anthem VideoAnthem Video

Video

Personalized card, client-rendered, with a small delay (after)

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Personalized card test, client-rendered, without a delay

Before:

Anthem VideoAnthem Video

Video

Personalized card, client-rendered, without a delay (before)

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

After:

Anthem VideoAnthem Video

Video

Personalized card, client-rendered, without a delay (after)

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Personalized card test, server-rendered, with a large delay

Before:

Anthem VideoAnthem Video

Video

Personalized card, server-rendered, w/ a large delay (before)

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

After:

Anthem VideoAnthem Video

Video

Personalized card, server-rendered, w/ a large delay (after)

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Personalized card test, server-rendered, with a small delay

Before:

Anthem VideoAnthem Video

Video

Personalized card, server-rendered, w/ a small delay (before)

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

After:

Anthem VideoAnthem Video

Video

Personalized card, server-rendered, w/ a small delay (after)

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Personalized card test, server-rendered, without delay

Before:

Anthem VideoAnthem Video

Video

Personalized card, server-rendered, without a delay (before)

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

After:

Anthem VideoAnthem Video

Video

Personalized card, server-rendered, without a delay (after)

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Chip

Stylistic tags for displaying meta data. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-chip
  {% include "@bolt-components-chip/chip.twig" with {
  text: "This is a chip",
  url: "#!",
} only %}
Name Type Value(s) Description Default
attributes object

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

N/A
text string

Chip Text.

N/A
url string

Optional. When url is present, tag changes to a, otherwise tag would be span.

N/A
tag string
  • a OR span

Html tag to be used. If a URL is provided, this will be ignored and a will be always be used.

span

chip

Chip List

Chip-list can contain multiple chips. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-chip-list
  {% include "@bolt-components-chip-list/chip-list.twig" with {
  contentItems: [
    {
      text: "Chip 1",
      url: "#!"
    },
    {
      text: "Chip 2",
      url: "#!"
    },
    {
      text: "Chip 3",
      url: "#!"
    }
  ]
} only %}
Name Type Value(s) Description Default
contentItems array
  • [items]:
    • Type: object

      Chip.

    • Properties:

An array of Chips.

N/A

Code Snippet

Monospace Font Styles for Code Text

Code snippet shows text in a style that is best fit for a monospace font. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-code-snippet
  {% include "@bolt-components-code-snippet/code-snippet.twig" with {
  display: "block",
  lang: "html",
  content: "Some code snippet"
} only %}

Monospace Font Styles for Code Text

Name Type Value(s) Description Default
display string
  • block OR inline

Display

Defines if the code text is inline or block.

block
lang string
  • css, html, js, scss, twig

Language

Language of the code text.

html
syntax string
  • light, dark, none

Syntax Highlighting

Toggle between a light and dark syntax highlighting, or turn it off. Separate from Bolt theming.

light

Code snippet can be a block of code, and display is set to block by default.

  display: block;
margin: 0 0 1.65rem 0;

Well, code snippet can also be inline like this display:inline; when you set display to be inline instead.

block:

  

Headline

inline:

Headline

css:

  .my-css {
  display: block;
}

scss:

  .my-scss {
  @include my-mixin;
}

html:

  

Headline

javascript:

  import { polyfillLoader } from '@bolt/core';

twig:

  {% include "@bolt-components-code-snippet/code-snippet.twig" with {
  "display": "block",
  "lang": "html",
  "content": "Some code snippet"
} only %}

light:

  

Headline

dark:

  

Headline

none:

  

Headline

Copy to Clipboard

Copy to Clipboard allows the user to copy the current page URL to clipbaord to paste and share.

Install via NPM
npm install @bolt/components-copy-to-clipboard
  {% include "@bolt-components-copy-to-clipboard/copy-to-clipboard.twig" with {
  text_to_copy: "https://boltdesignsystem.com"
} only %}
Name Type Value(s) Description Default
attributes object

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

N/A
text string

DEPRECATED

This property has been renamed trigger_text

Copy Link
copiedText string

DEPRECATED

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

Copied!
iconSize string

DEPRECATED

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

medium
url string

DEPRECATED

This property has been renamed text_to_copy

N/A
trigger_text string

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

Copy Link
text_to_copy* string

The text to copy to the clipboard.

N/A
custom_trigger string OR object OR array

(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.

N/A
custom_transition string OR object OR array

(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.

N/A
custom_confirmation string OR object OR array

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

N/A
Copied!
Copied!
Copied!
Copied!
Custom transition
Copied!
Copied!
Custom transition

Custom confirmation

Device Viewer

Device frames for showcase. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-device-viewer
  {% include "@bolt-components-device-viewer/device-viewer.twig" with {
  device: "iphone8",
  orientation: "portrait",
  color: "white",
  image: {
    src: "/images/sample/product-device-screenshot--phone.jpg"
  }
} only %}
Name Type Value(s) Description Default
deviceName string
  • ipad, iphone8, macbook

Name of the device.

N/A
color string
  • black, silver, gold

Device color.

N/A
orientation string
  • portrait OR landscape

Device orientation.

N/A
magnify boolean

Add the magnifier effect.

false
image object
    • src

      Source url for the image.

N/A

Color: black
Orientation: 'portrait'

Color: black
Orientation: 'landscape'

Color: silver
Orientation: 'portrait'

Color: silver
Orientation: 'landscape'

Magnification: true
Orientation: 'portrait'

Magnification: true
Orientation: 'landscape'

Color: black
Orientation: 'portrait'

Color: black
Orientation: 'landscape'

Color: silver
Orientation: 'portrait'

Color: silver
Orientation: 'landscape'

Color: gold
Orientation: 'portrait'

Color: gold
Orientation: 'landscape'

Magnification: true
Orientation: 'portrait'

Magnification: true
Orientation: 'landscape'

Magnification: true

Dropdown

The Dropdown component adds a slick, extensible, and accessible menu system.

Install via NPM
npm install @bolt/components-dropdown

Description

Fully interactive with and without JS enabled (including keyboard support)

  // Via Twig
{% embed "@bolt-components-dropdown/dropdown.twig" with {
  title: "Toggle Menu",
  collapse: true
} %}
  {% block content %}
    {% include "@bolt-components-nav/nav.twig" with {
      links: [
        {
        text: "Link 1 Text",
        url": "#!"
      },
      {
        text: "Link 2 Text",
        url": "#!"
      },
      {
        text: "Link 3 Text",
        url": "#!"
      }
      ]
    } %}
  {% endblock %}
{% endembed %}

// Via Web Component and Twig

  {% include "@bolt-components-nav/nav.twig" with {
    links: [
      {
        text: "Link 1 Text",
        url": "#!"
      },
      {
        text: "Link 2 Text",
        url": "#!"
      },
      {
        text: "Link 3 Text",
        url": "#!"
      }
    ]
  } only %}

Name Type Value(s) Description Default
title string

The toggle title text

N/A
center boolean

True to center the toggle title

false
collapse boolean

True to hide toggle until mobile screen size

false
content any

All of the items in the dropdown -- generally works by including @bolt-components-nav/nav.twig with links array of objects containing text & url

N/A