Action blocks

Getting Started

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

Usage

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

Schema

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

Edit this page

Item 1
Item 2
Item 3

Align: top

Item 1, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim non dui vel elementum. Cras id lorem tincidunt turpis mollis pretium.
Item 2
Item 3
Item 4

Align: center

Item 1, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim non dui vel elementum. Cras id lorem tincidunt turpis mollis pretium.
Item 2
Item 3
Item 4

Align: bottom

Item 1, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim non dui vel elementum. Cras id lorem tincidunt turpis mollis pretium.
Item 2
Item 3
Item 4

Border: True

Item 1
Item 2
Item 3

Border: False

Item 1
Item 2
Item 3

Max items per row: 6

Item 1, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim non dui vel elementum. Cras id lorem tincidunt turpis mollis pretium.
Item 2
Item 3
Item 4
Item 5, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim non dui vel elementum. Cras id lorem tincidunt turpis mollis pretium.
Item 5

Max items per row: 4

Item 1, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim non dui vel elementum. Cras id lorem tincidunt turpis mollis pretium.
Item 2
Item 3
Item 4
Item 5, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim non dui vel elementum. Cras id lorem tincidunt turpis mollis pretium.
Item 5

Max items per row: 3

Item 1, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim non dui vel elementum. Cras id lorem tincidunt turpis mollis pretium.
Item 2
Item 3
Item 4
Item 5, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim non dui vel elementum. Cras id lorem tincidunt turpis mollis pretium.
Item 5

Max items per row: 2

Item 1, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim non dui vel elementum. Cras id lorem tincidunt turpis mollis pretium.
Item 2
Item 3
Item 4
Item 5, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim non dui vel elementum. Cras id lorem tincidunt turpis mollis pretium.
Item 5

Theme: xlight

Item 1, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim non dui vel elementum. Cras id lorem tincidunt turpis mollis pretium.
Item 2
Item 3
Item 4

Theme: light

Item 1, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim non dui vel elementum. Cras id lorem tincidunt turpis mollis pretium.
Item 2
Item 3
Item 4

Theme: dark

Item 1, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim non dui vel elementum. Cras id lorem tincidunt turpis mollis pretium.
Item 2
Item 3
Item 4

Theme: xdark

Item 1, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim non dui vel elementum. Cras id lorem tincidunt turpis mollis pretium.
Item 2
Item 3
Item 4

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

Usage

{% include "@bolt-components-background-shapes/background-shapes.twig" with {
  shapeGroup: "B"
} only %}

Schema

Name	Type	Value(s)	Description	Default
shapeGroup	`string`	`A` OR `B`	The shapeGroup to use to build the shapes layout.	`A`

Edit this page

shapeGroup: A

shapeGroup: B

Bolt Background

Getting Started

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

Usage

{% include "@bolt-components-background/background.twig" with {
  opacity: "heavy",
  fill: "gradient",
  focalPoint: {
    vertical: "center",
    horizontal: "center"
  },
  contentItems: [
    {
      pattern: "image",
      src: "/pattern-lab/images/content/backgrounds/background-tall-4.jpg"
    }
  ]
} only %}

Schema

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

Edit this page

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

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

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

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

Getting Started

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

Usage

{% include "@bolt-components-band/band.twig" with {
  content: "Example Band Content",
} only %}

Schema

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

Edit this page

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.

January 25, 2018
10:00 AM EST
New York, NY

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

Pega Events

Customer Engagement Summit Detroit

Hear insights. Make connections. Drive innovation.

January 25, 2018
10:00 AM EST
New York, NY

^ via Twig Include, items array separate from content field

Pega Events

Customer Engagement Summit Detroit

Hear insights. Make connections. Drive innovation.

January 25, 2018
10:00 AM EST
New York, NY

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

Block List

Getting Started

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

Usage

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

Schema

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

Edit this page

Link 1
Link 2
Link 3
Simple text example

Theme: xlight

Link 1
Link 2
Link 3
Simple text example

Theme: light

Link 1
Link 2
Link 3
Simple text example

Theme: medium

Link 1
Link 2
Link 3
Simple text example

Theme: dark

Link 1
Link 2
Link 3
Simple text example

Theme: xdark

Link 1
Link 2
Link 3
Simple text example

Blockquote

Getting Started

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

Usage

{% include "@bolt-components-blockquote/blockquote.twig" with {
  content: "The greater danger for most of us lies not in ... achieving our mark."
} only %}

Schema

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

Edit this page

alignItems: left

alignItems: center

alignItems: right

Indent: True

Indent: False

Border: vertical

Border: horizontal

Border: none

Multiple Paragraph Content

theme: xlight

theme: light

theme: dark

theme: xdark

Breadcrumb

Getting Started

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

Usage

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

Schema

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

Edit this page

Bolt Button

Getting Started

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.

Usage

{% include "@bolt-components-button/button.twig" with {
  text: "Example Button"
} only %}

Schema

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`	`position` `before` OR `after`	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	`string`	`rounded`	Rounded Corners? What kind of rounded corners should the button have?	N/A
iconOnly	`boolean`		Icon Only? Is this an icon-only button (with visually hidden text)?	`false`

Edit this page

Rounded Button

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

Getting Started

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.

Usage

{% include "@bolt-components-button-group/button-group.twig" with {
  buttons: [
    {
      text: "Learn More",
      style: "primary"
    },
    {
      text: "About Pega",
      style: "secondary"
    }
  ]
} only %}

Schema

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

Edit this page

1 Button(s)

2 Button(s)

3 Button(s)

4 Button(s)

5 Button(s)

This is text with the tags stripped.

Card

Getting Started

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

Usage

{% include "@bolt-components-card/card.twig" with {
  tag: "article",
  contentTag: "div",
  contentItems: [
    {
      pattern: "image",
      src: "/pattern-lab/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 %}

Schema

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

Edit this page

Video

Anthem: Service Desktop

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

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.

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

Eyebrow

Headline

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

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

Video

Anthem: Service Desktop

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

Video

Anthem: Service Desktop

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

Video

Anthem: Service Desktop

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

Individual themed cards in a band w/ background image

Video

Anthem: Service Desktop

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

Video

Anthem: Service Desktop

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

Video

Anthem: Service Desktop

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

Non-themed cards in a band w/ background image

Video

Anthem: Service Desktop

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

Video

Anthem: Service Desktop

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

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:

Video

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

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

After:

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:

Video

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

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

After:

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:

Video

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

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

After:

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:

Video

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

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

After:

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:

Video

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

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

After:

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:

Video

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

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

After:

Video

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

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

Chip

Getting Started

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

Usage

{% include "@bolt-components-chip/chip.twig" with {
  text: "This is a chip",
  url: "#!",
} only %}

Schema

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`

Edit this page

This is a chip

Chip List

Getting Started

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

Usage

{% include "@bolt-components-chip-list/chip-list.twig" with {
  contentItems: [
    {
      text: "Chip 1",
      url: "#!"
    },
    {
      text: "Chip 2",
      url: "#!"
    },
    {
      text: "Chip 3",
      url: "#!"
    }
  ]
} only %}

Schema

Name	Type	Value(s)	Description	Default
contentItems	`array`	[items]: Type: `object` Chip. Properties:	An array of Chips.	N/A

Edit this page

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Code Snippet

Getting Started

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

Usage

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

Schema

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`

Edit this page

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

Getting Started

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

Usage

{% include "@bolt-components-copy-to-clipboard/copy-to-clipboard.twig" with {
  text_to_copy: "http://bolt-design-system.com"
} only %}

Schema

Name	Type	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

Edit this page

Copied!

Custom transition

Copied!

Custom transition

Custom confirmation

Device Viewer

Getting Started

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

Usage

{% include "@bolt-components-device-viewer/device-viewer.twig" with {
  device: "iphone8",
  orientation: "portrait",
  color: "white",
  image: {
    src: "/pattern-lab/images/sample/product-device-screenshot--phone.jpg"
  }
} only %}

Schema

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

Edit this page

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

Getting Started

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)

Usage

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

Schema

Name	Type	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

Edit this page

Figure

Getting Started

Figure for displaying graphics or tabular content. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-figure

Usage

{% include "@bolt-components-figure/figure.twig" with {
  image: {
    src: "/pattern-lab/images/placeholders/500x500.jpg",
    lazyload: false
  },
  caption: "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."
} only %}

Schema

Name	Type	Value(s)	Description	Default
attributes	`object`		A Drupal-style attributes object with extra attributes to append to this component.	N/A
image	`object`	@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:	A bolt image object.	N/A
caption	`string` OR `object` OR `array`		A renderable figure caption.	N/A
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`, `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`	A bolt icon object.	N/A
content	`string` OR `object` OR `array`		A catch-all for renderable content (e.g. a string, render array, or included pattern object) to place in the figure.	N/A

Edit this page

Form

Getting Started

A collection of fieldsets to create a form. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-form

Usage

{% include "@bolt-components-form/form.twig" with {
  text: "This is a form",
  url: "#!",
} only %}

Title

Disabled Title

Email

We promise not to sell your email address

Password

Search

Username

The username you entered is already taken.

Single Radio

Select an alignment

Left-aligned

Center-aligned

Right-aligned

I accept the terms and conditions

Select toppings

If there were any server-side errors, you'd see them here

Pick at least two of the following

Pepperoni

Olives

Feta

Pineapple

Select

Job Description

Get the Report

(all fields are required)

First Name

Last Name

Email Address

Title

Company Name

Country

Receive periodic emails on key analyst reports, Pega events, and important news. You can unsubscribe at any time

Get the Report

(all fields are required)

Get the Report

(all fields are required)

Get the Report

(all fields are required)

(Note: forms do not offically support dark themes yet. Use at your own risk.)

Bolt Grid

Getting Started

CSS-Grid powered Grid component. Still in very early develpment so use with caution!

Install via NPM

npm install @bolt/components-grid

Usage

{% include "@bolt-components-grid/grid.twig" with {
  vinset: "medium",
  items: [
    {
      row_start: "1",
      column_start: "1",
      column_span: "12 6@medium",
      content: "Grid Item 1",
      attributes: {
        class: [
          "t-bolt-dark",
          "u-bolt-padding-medium",
        ]
      }
    },
    {
      row_start: "2",
      column_start: "7 1@small 5@medium",
      column_span: "12 6@small 5@medium",
      content: "Grid Item 2",
      attributes: {
        class: [
          "t-bolt-light",
          "u-bolt-padding-medium",
        ]
      }
    },
    {
      row_start: "3 3@small 3@medium 3@large",
      column_start: "1 7@small 1@medium",
      column_span: "6 12@small 4@medium",
      content: "Grid Item 3",
      attributes: {
        class: [
          "t-bolt-xdark",
          "u-bolt-padding-medium",
        ]
      }
    },
    {
      row_start: "4 1@medium",
      row_span: "1 3@medium",
      column_start: "1 1@small 10@medium",
      column_span: "12 12@small 3@medium",
      content: "Grid Item 4",
      attributes: {
        class: [
          "t-bolt-dark",
          "u-bolt-padding-medium",
        ]
      }
    },
  ]
} only %}

Schema

Flexible component to build out CSS Grid-based layouts

Name	Type	Value(s)	Description	Default
attributes	`object`		A Drupal-style attributes object with extra attributes to append to this component.	N/A
row_gutter	`string`	`none`, `small`, `medium`, `large`	Specifies the row gutter size between the rows of the grid.	`none`
vinset	`string`	`none`, `xsmall`, `small`, `medium`, `large`, `xlarge`	The size of the inner space (vertical inset) that sits above / below the grid itself	`none`
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 grid itself.	N/A

Edit this page

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Row Gutter: none

Grid Item 1

Grid Item 2

Grid Item 3

Row Gutter: small

Grid Item 1

Grid Item 2

Grid Item 3

Row Gutter: medium

Grid Item 1

Grid Item 2

Grid Item 3

Row Gutter: large

Grid Item 1

Grid Item 2

Grid Item 3

Vinset: none

Grid Item 1

Grid Item 2

Grid Item 3

Vinset: xsmall

Grid Item 1

Grid Item 2

Grid Item 3

Vinset: small

Grid Item 1

Grid Item 2

Grid Item 3

Vinset: medium

Grid Item 1

Grid Item 2

Grid Item 3

Vinset: large

Grid Item 1

Grid Item 2

Grid Item 3

Vinset: xlarge

Grid Item 1

Grid Item 2

Grid Item 3

Headline

Getting Started

Headlines are specific combinations of typographic styles for display text. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-headline

Usage

{% include "@bolt-components-headline/headline.twig" with {
  text: "This is a headline",
} only %}

{% include "@bolt-components-headline/eyebrow.twig" with {
  text: "This is an eyebrow",
} only %}

{% include "@bolt-components-headline/subheadline.twig" with {
  text: "This is a subheadline",
} only %}

{% include "@bolt-components-headline/text.twig" with {
  text: "This is text",
} only %}

{% include "@bolt-components-headline/lead.twig" with {
  text: "This is a lead",
} only %}

Schema

Name	Type	Value(s)	Description	Default
text*	`string` OR `object` OR `array`		Renderable text content of the headline.	N/A
tag	`string`	`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `span`, `cite`, `div`	Html tag.	`p`
align	`string`	`left`, `center`, `right`	Text alignment.	N/A
weight	`string`	`bold`, `regular`, `semibold`	Font weights.	`regular`
style	`string`	`normal` OR `italic`	Font styles.	`normal`
size	`string`	`xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`, `xxxlarge`	Font size.	`medium`
transform	`string`	`uppercase`, `lowercase`, `capitalize`	Text transformation.	N/A
url	`string`		If provided, turns headline into a link to given url.	N/A
icon	`object` OR `string` OR `string`		Bolt icon. Accepts either 1) an icon name as a string 2) an icon object as expected by `@bolt-components-icon` or 3) the string "none" to explicitly remove default icons	N/A
quoted	`boolean`		Adds quoted styling to text.	N/A

Edit this page

This is an eyebrow

This is a headline

This is a subheadline

This is text

This is a lead

H1

This is an example of H1

H2

This is an example of H2

H3

This is an example of H3

H4

This is an example of H4

H5

This is an example of H5

H6

This is an example of H6

P

This is an example of P

SPAN

This is an example of SPAN

Align:

This is an example of align left

Align:

This is an example of align center

Align:

This is an example of align right

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

Headline w/ Icon Position `before`

What we do at Pega is brilliant!

Headline w/ Icon Position `after`

What we do at Pega is brilliant!

Headline w/ Default Icon Position

What we do at Pega is brilliant!

Headline w/ Icon Options

What we do at Pega is brilliant!

Headline w/ `Left` Icon Position (Deprecated)

What we do at Pega is brilliant!

Headline w/ `Right` Icon Position (Deprecated)

What we do at Pega is brilliant!

This headline is a link, with Default Icon

This headline is also a link, with Defined Icon

This headline is also a link, without an Icon

What we do at Pega is brilliant!

Icon

Getting Started

Icon. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-icon

Usage

{% include "@bolt-components-icon/icon.twig" with {
  name: "add-open",
  background: "circle",
  size: "medium",
} only %}

Schema

Name	Type	Value(s)	Description	Default
name*	`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`, `support`, `system-admin`, `training`, `transportation`, `twitter-solid`, `twitter`, `unlock`, `upload`, `user`, `user-interface`, `video`, `vision`, `warning`, `watch`, `workforce-intelligence`, `youtube-solid`	Icon name.	N/A
background	`string`	`circle` OR `square`	Background shape. This applies only to 'xlarge' icons.	N/A
size	`string`	`small`, `medium`, `large`, `xlarge`	Icon size.	N/A
color	`string`	`teal` OR `blue`	Icon color. Currently only support default (black) and teal.	N/A

Edit this page

Bolt's SVG icon system provides the ability to customize an individual icon's color (the shape itself), background color, and background opacity levels, in both the Twig and Custom Element formats the design system ships.

via Web Component:

via Twig Include:

    
    {% include "@bolt-components-icon/icon.twig" with {
    name: "customer-service",
    background: "circle",
    size: "xlarge",
    attributes: {
      style: [
        "color: #e64b18;",
        "--bolt-theme-icon-background: #e64b18;",
        "--bolt-theme-icon: #FFF;",
        "--bolt-theme-icon-background-opacity: 1;"
      ]
    }
    } only %}

Theme: light

Background: circle
Background: circle
Color: teal
Background: circle
Color: blue

Background: square
Background: square
Color: teal
Background: square
Color: blue

Theme: dark

Background: circle
Background: circle
Color: teal
Background: circle
Color: blue

Background: square
Background: square
Color: teal
Background: square
Color: blue

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
support
system-admin
training
transportation
twitter-solid
twitter
unlock
upload
user
user-interface
video
vision
warning
watch
workforce-intelligence
youtube-solid

Image

Getting Started

An image. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-image

Image sizes

To specify image size (e.g u-bolt-width-1/1) pass the correct class like so:

{% set classes = create_attribute(imageAttributes | default({})).addClass([
    "c-bolt-image__img",
    "u-bolt-width-1/1",
  ])
%}

Then pass it into the component:

{% include '@bolt-components-image/image.twig' with {
  src: "/images/placeholders/tout-4x3-climber.jpg",
  alt: "A Rock Climber",
  imageAttributes: classes,
} only %}

Usage

{% include '@bolt-components-image/image.twig' with {
  src: "/src/images/turtle.jpg",
  alt: "A Turtle"
} only %}

Schema

Name	Type	Value(s)	Description	Default
src	`string`		Source url for image.	N/A
alt	`string`		Alt tag for image.	N/A
lazyload	`boolean`	`TRUE` OR `FALSE`	Lazyload can boost performance by loading images on demand, instead of on initial page load.	`true`
srcset	`string`		A comma seperated string of image urls and image widths, used for optimizing image loading performance.	N/A
sizes	`string`		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.	`auto`
useAspectRatio	`boolean`	`TRUE` OR `FALSE`	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.	`true`
width	`number` OR `string`		Override the default width of the image. If no height is provided, aspect ratio will be maintained.	N/A
height	`number` OR `string`		Override the default height of the image. If no width is provided, aspect ratio will be maintained.	N/A

Edit this page

640x480 jpg

500x500 jpg

,

1151x638 jpg

1151x638 jpeg

2712x2300 png

3000x5336 jpeg

124x33 svg

Src: Root Relative

src: "/pattern-lab/images/placeholders/image.jpg",

Src: Source Set

srcset: "/pattern-lab/images/placeholders/500x500-200.jpg 200w,/pattern-lab/images/placeholders/500x500-480.jpg 480w",

Src only that won't be found in `bolt.data.images`

Src only that won't be found in `bolt.data.images` and not lazy loaded

Src and srcset that won't be found in `bolt.data.images`

Srcset only that won't be found in `bolt.data.images` and not lazy loaded

Srcset only that won't be found in `bolt.data.images` and lazy loaded

Absolute src - not lazy loaded

Absolute src - lazy loaded

Jpg: Lazyload true

Jpg: Lazyload false

Png: Lazyload true

Png: Lazyload false

Svg: Lazyload: true

Svg: Lazyload: false

Custom Height and Width, JPEG (2:1)

Custom Height and Width, PNG (2:1)

Custom Height and Width, SVG (10:1)

Image Zoom

When used with the device viewer component, the image component can used to create a "zoomed" state (`magnify` must be set to `true` on the device viewer).

Link

Getting Started

Text link styles. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-link

Usage

{% include "@bolt-components-link/link.twig" with {
  text: "This is a link",
  url: "#!"
} only %}

Schema

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` OR `object` OR `array`		Renderable text content for the link.	N/A
url	`string`		A url to link to. This may also be passed as part of `attributes`	N/A
href	`string`		Deprecated. Use url instead.	N/A
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`, `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`	Bolt icon. Accepts the same options as Bolt Icon Component `@bolt-components-icon`	N/A
isHeadline	`boolean`		Whether this link should get special headline styling treatment	N/A

Edit this page

This is a text link

Default icon postion is after the link:

Like This

But the icon can go before the link:

Like This

Headline Link with Default Icon

Text link

Headline Link with Default Icon

Text link

Headline Link with Default Icon

Text link

Headline Link with Default Icon

Text link

List

Getting Started

Minimal list component for laying out a group of items. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-list

Usage

{% include "@bolt-components-list/list.twig" with {
  display: "inline",
  spacing: "xsmall",
  align: "start",
  valign: "center",
  items: [
    "Item 1",
    include("@bolt-components-link/link.twig", {
      text: "Item 2",
      url: "#!",
    }),
    include("@bolt-components-chip/chip.twig", {
      text: "Item 3",
      url: "#!",
    }),
    include("@bolt-components-button/button.twig", {
      text: "Item 4",
      url: "#!",
      size: "small",
    }),
    "Item 5",
  ]
} only %}

Schema

Minimal list component for laying out a group of items.

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`		All items can be simple text or `items`.	N/A
tag	`string`	`ul`, `ol`, `div`, `span`	Apply the semantic tag for the list.	`ul`
display	`string`	`inline`, `block`, `inline@xxsmall`, `inline@xsmall`, `inline@small`, `inline@medium`	Display either an inline list of items or a block (stacked) list of items. Responsive options are also available for transforming from block to inline at specific breakpoints.	`block`
spacing	`string`	`none`, `xsmall`, `small`, `medium`, `large`, `xlarge`	Control the spacing in between items.	`xsmall`
separator	`string`	`none`, `solid`, `dashed`	Display a separator in between items.	`none`
inset	`boolean`		Turn spacing to the inside of each item.	`false`
align	`string`	`start`, `center`, `end`	Control the horizontal alignment of items.	`start`
valign	`string`	`start`, `center`, `end`	Control the vertical alignment of items.	`center`

Edit this page

Placeholder 1
Placeholder 2
Placeholder 3

Inline list of different items

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11

Inline list of buttons

Item 1
Item 2
Item 3

Inline

Placeholder 1
Placeholder 2
Placeholder 3

Block

Placeholder 1
Placeholder 2
Placeholder 3

Inline@xxsmall

Placeholder 1
Placeholder 2
Placeholder 3

Inline@xsmall

Placeholder 1
Placeholder 2
Placeholder 3

Inline@small

Placeholder 1
Placeholder 2
Placeholder 3

Inline@medium

Placeholder 1
Placeholder 2
Placeholder 3

Inline list with spacing (none)

Placeholder 1
Placeholder 2
Placeholder 3

Block list with spacing (none)

Placeholder 1
Placeholder 2
Placeholder 3

Inline list with spacing (xsmall)

Placeholder 1
Placeholder 2
Placeholder 3

Block list with spacing (xsmall)

Placeholder 1
Placeholder 2
Placeholder 3

Inline list with spacing (small)

Placeholder 1
Placeholder 2
Placeholder 3

Block list with spacing (small)

Placeholder 1
Placeholder 2
Placeholder 3

Inline list with spacing (medium)

Placeholder 1
Placeholder 2
Placeholder 3

Block list with spacing (medium)

Placeholder 1
Placeholder 2
Placeholder 3

Inline list with spacing (large)

Placeholder 1
Placeholder 2
Placeholder 3

Block list with spacing (large)

Placeholder 1
Placeholder 2
Placeholder 3

Inline list with spacing (xlarge)

Placeholder 1
Placeholder 2
Placeholder 3

Block list with spacing (xlarge)

Placeholder 1
Placeholder 2
Placeholder 3

Inline list with separators (solid)

Item 1
Item 2
Item 3

Block list with separators (solid)

Item 1
Item 2
Item 3

Inline list with separators (dashed)

Item 1
Item 2
Item 3

Block list with separators (dashed)

Item 1
Item 2
Item 3

Inset spacing is best suited for block lists, even though you can apply to inline list as well.

Block list with inset spacing (xsmall) and separators

Item 1
Item 2
Item 3

Block list with inset spacing (small) and separators

Item 1
Item 2
Item 3

Block list with inset spacing (medium) and separators

Item 1
Item 2
Item 3

Block list with inset spacing (large) and separators

Item 1
Item 2
Item 3

Block list with inset spacing (xlarge) and separators

Item 1
Item 2
Item 3

Regular vs inset spacing

There are 2 different types of spacing styles and you can use it to your advantage. Different layouts call for different spacing styles, use your best judgment to apply the more applicable style.

The advantage of using regular spacing style

This is the regular spacing style, which adds space only in between items. So when it is put side by side next to a paragraph of text, the top of the list will line up with the paragraph of text (optically). Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. 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. Quisque eget odio ac lectus vestibulum faucibus eget in metus. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. 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. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.

Item 1
Item 2
Item 3
Item 4
Item 5

The same applies to items with a background color. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. 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. Quisque eget odio ac lectus vestibulum faucibus eget in metus. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. 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. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.

Placeholder 1
Placeholder 2
Placeholder 3

The advantage of using inset spacing style

Inset spacing puts spacing around each item, this is very useful if you are putting the list inside any kind of box container. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. 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. Quisque eget odio ac lectus vestibulum faucibus eget in metus. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. 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. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.

Placeholder 1
Placeholder 2
Placeholder 3

^ This list is inside a colored box.

Align prop only works with inline display, it has no effects on block display.

Horizontally align inline items: start

Placeholder 1
Placeholder 2
Placeholder 3

Horizontally align inline items: center

Placeholder 1
Placeholder 2
Placeholder 3

Horizontally align inline items: end

Placeholder 1
Placeholder 2
Placeholder 3

Valign prop only works with inline display, it has no effects on block display.

Vertically align inline items: start

Placeholder 1
Placeholder 2
Placeholder 3

Vertically align inline items: center

Placeholder 1
Placeholder 2
Placeholder 3

Vertically align inline items: end

Placeholder 1
Placeholder 2
Placeholder 3

Use the semantically correct tag based on the context of your page layout.

ul

Item 1
Item 2
Item 3

ol

Item 1
Item 2
Item 3

div

Item 1 Item 2 Item 3

span

Item 1 Item 2 Item 3

Logo

Getting Started

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

Install via NPM

npm install @bolt/components-logo

Usage

{% include "@bolt-components-logo/logo.twig" with {
  src: "/pattern-lab/images/content/logos/logo-paypal.svg"
} only %}

Schema

Note that logo accepts all the same parameters as the bolt-image component in addition to the properties below.

Name	Type	Value(s)	Description	Default
invert	`boolean`		Set to true to invert the logo colors.	N/A

Edit this page

Visualization & Simulation

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.

Section 1

Suspendisse dictum feugiat nisl ut dapibus. 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. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. 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. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci.

Section 2

Suspendisse dictum feugiat nisl ut dapibus. 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. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. 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. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci.

Section 3

Suspendisse dictum feugiat nisl ut dapibus. 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. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. 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. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci.

Section 4

Suspendisse dictum feugiat nisl ut dapibus. 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. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. 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. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci.

Section 5

Suspendisse dictum feugiat nisl ut dapibus. 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. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. 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. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci.

Section 6

Suspendisse dictum feugiat nisl ut dapibus. 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. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. 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. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci.

Navbar

Getting Started

Navbar is a list of secondary links. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-navbar

Usage

{% include "@bolt-components-navbar/navbar.twig" with {
  title: {
    tag: "h2",
    text: "Title Text",
    icon: {
      name: "icon-name"
    }
  },
  links: [
    {
      text: "Link 1 Text",
      url: "#!"
    },
    {
      text: "Link 2 Text",
      url: "#!"
    },
    {
      text: "Link 3 Text",
      url: "#!"
    }
  ]
} only %}

Schema

Name	Type	Value(s)	Description	Default
theme	`string`	`xlight`, `light`, `dark`, `xdark`, `none`	Color theme. Can be set to 'none' for a transparent background.	`dark`
title	`object`	`tag` `h1`, `h2`, `h3`, `h4`, `h5`, `h6` `text` `icon` `name` Name of the (optional) icon to be used.	Navbar title. Icon is optional. Tag can be set to h1 to h6 depending on the page.	N/A
center	`boolean`	`TRUE` OR `FALSE`	Determines if you want the Navbar content to be center aligned or not	N/A
width	`string`	`full` OR `auto`	Adjusts the Navbar's overall maximum width behavior -- either filling up the entire browser's total screen width (full) or just the component's parent container width (auto).	`full`
links	`array`	[items]: Type: `object` Properties: `text` Type: `string` `url` Type: `string`	(Inherited from nav-priority) Array of links	N/A
moreText	`string`		(Inherited from nav-priority) Button text that displays when the Priority+ Nav Dropdown is displayed.	`More`
offset	`integer`		(Inherited from nav-indicator) Number of pixels taken up by sticky items at the top of the page. Used for smooth scroll and gumshoe.	N/A

Edit this page

The Navbar component's full width option allows the component to span the entire page / screen's width in size -- ideal for sticky nav and overall site navigation.

This full config option for the Navbar component can be combined with the other config options available such as center.

The Navbar component's auto width option allows the component to be used in situations where it doesn't / shouldn't span the browser's entire screen-width in size (ex. in a sidebar or off-canvas nav)

This provides maximum flexibility when coming up with creative solutions.

Theme: xlight

Theme: light

Theme: dark

Theme: xdark

Theme: none

Activate linked title by passing in an url

Remove theme and gradient for a transparent option

Ordered List

Getting Started

Stylistic numbered list for article content.

Install via NPM

npm install @bolt/components-ordered-list

Usage

{% include "@bolt-components-ordered-list/ordered-list.twig" with {
  contentItems: [
    {
      text: "Do not include any data or information in your posts that are confidential!"
    },
    {
      text: "Apply basic practices for collaborative work."
    },
    {
      text: "Be honest, respectful, trustworthy and helpful."
    },
    {
      text: "Answer questions authoritatively and concisely. Avoid cluttering discussions with noise."
    }
  ]
} only %}

Schema

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`	[items]: Type: `object` A single list item object with either a `text` or `contentItems` key Properties: `text` Type: `string` `contentItems` Passes to `@bolt/text.twig` Type: `object`	The content items These are all of the items in the ordered list	N/A

Edit this page

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: xlight

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: light

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: dark

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: xdark

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: medium

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Page Footer

Getting Started

Component in progress

Install via NPM

npm install @bolt/components-page-footer

Content

Set content as arbitrary HTML:

{% set content %}
  <p>Whatever HTML content you want</p>
{% endset %}

Usage

{% include "@bolt-components-page-footer/page-footer.twig" with {
  content: content
} only %}

Page Header

Getting Started

Component in progress

Install via NPM

npm install @bolt/components-page-header

Content

Set content as arbitrary HTML:

{% set content %}
  <p>Whatever HTML content you want</p>
{% endset %}

Usage

{% include "@bolt-components-page-header/page-header.twig" with {
  content: content
} only %}

Bolt Pagination

Getting Started

The sequence of numbers assigned to pages on a search results page. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-pagination

Usage

{% include "@bolt-components-pagination/pagination.twig" with {
  current: 5,
  total: 10,
  first: {
    href: 'page-1-url'
  },
  previous: {
    href: 'page-4-url'
  },
  pages: {
    3: {
      href: 'page-3-url'
    },
    4: {
      href: 'page-4-url'
    },
    5: {
      href: 'page-5-url'
    },
    6: {
      href: 'page-6-url'
    },
    7: {
      href: 'page-7-url'
    }
  },
  next: {
    href: 'page-6-url'
  },
  last: {
    href: 'page-10-url'
  }
} only %}

Schema

Name	Type	Value(s)	Description	Default
attributes	`object`		A Drupal-style attributes object with extra attributes to append to this component.	N/A
align	`string`	`start`, `end`, `center`	Horizontally align the items.	`center`
total*	`number`		Total pages Total pages within the pagination	N/A
current*	`number`		Current page Current page selected	N/A
pages*	`array` OR `object`		A keyed array of page item objects where the key is the page number	N/A
first	`object`	`href` The link for this pager item. Href may also be passed as part of attributes (which will take precedence). `attributes` A Drupal-style attributes object for this link.	A link object for the first page	N/A
previous	`object`	`href` The link for this pager item. Href may also be passed as part of attributes (which will take precedence) `attributes` A Drupal-style attributes object for this link.	A link object for the previous page (e.g. if on page 3, this links to page 2)	N/A
next	`object`	`href` The link for this pager item. Href may also be passed as part of attributes (which will take precedence) `attributes` A Drupal-style attributes object for this link.	A link object for the next page (e.g. if on page 3, this links to page 4)	N/A
last	`object`	`href` The link for this pager item. Href may also be passed as part of attributes (which will take precedence) `attributes` A Drupal-style attributes object for this link.	A link object for the last page	N/A
previousText	`string`		Previous text Text to be displayed for the previous anchor	`Previous`
nextText	`string`		Next text Text to be displayed for the next anchor	`Next`

Edit this page

1 of 3

1 of 6

1 of 7

4 of 5

4 of 6

4 of 10

5 of 7

6 of 6

5 of 10

100 of 100

Internationalization Support

For better internationalization support, align prop uses the start (left) and end (right) vocab. This helps the pagination to have the desired alignment regardless of the writing direction of the language being displayed.

Align start

Align end

Align center

Pagination on the Left, Something on the Right

In this case, you must set the align prop to be start so it is not centered within the cell.

Something on the right

Bolt Placeholder Example

xsmall Placeholder

small Placeholder

medium Placeholder

large Placeholder

xlarge Placeholder

Bolt Placeholder Example

Search Filter

Getting Started

A wrapper for search filters that primarily handles mobile behavior. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

NOTE: as of this writing, this component is used only for internal Bolt demos and not in any actual search. It may require some modification to be usable in the real world.

Install via NPM

npm install @bolt/search-filter

Usage

{% include "@bolt-components-search-filter/search-filter.twig" with {
  "content": "Insert search filters here."
} only %}

Schema

Name	Type	Value(s)	Description	Default
attributes	`object`		A Drupal-style attributes object with extra attributes to append to this component.	N/A
content			Renderable content (e.g. a string, render array, or included pattern) to display within a modal at mobile breakpoints. Typically, this is where the filters themselves go.	N/A

Edit this page

Share

Getting Started

Share block. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-share

Description

The share component provides the user a visual queue to share the content with relevant peers, as well as an easy mechanism to actively do the sharing.

OG Tags

OG tags MUST be present for share functionality to work correctly (see example below)
The only currently supported share methods are:
- Facebook
- Twitter
- LinkedIn
- Email
- Copy to Clipboard (component)
Facebook only needs u (URL) to scrap the page's OG Tags
- Facebook Sharing API resources: https://developers.facebook.com/docs/sharing/reference/share-dialog#params_share
- Facebook Open Graph Debuger: https://developers.facebook.com/tools/debug/
Twitter Needs at least one of the following query vars:
- url (recommended -- URL included with the Twee)
- text (recommended -- re-populated text highlighted in the Tweet composer)
- via (Attribute the source of a Tweet to a Twitter username, no @ needed)
- hashtags (A comma-separated list of hashtags to be appended to default Tweet text)
- Twitter Tweet API resources: https://dev.twitter.com/web/tweet-button/parameters#tweet-content-parameters
- Twitter card validator: https://cards-dev.twitter.com/validator
LinkedIn only needs url to scrap the page's OG Tags, but also can include:
- title
- summary
- source
- LinkedIn Sharing API resources: https://developer.linkedin.com/docs/share-on-linkedin (click "Customized URL")
Email Recommended query vars:
- subject
- body

Example

<meta property="og:type" content="article" />
<meta property="og:title" content="Bolt Design System: Page Title" />
<meta property="og:description" content="Sample description" />
<meta property="og:image" content="https://bolt-design-system.com/images/500x500-480.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="480" />
<meta property="og:image:height" content="480" />
<meta property="og:url" content="https://bolt-design-system.com/some-page-title-here" />
<meta property="og:site_name" content="Bolt Design System" />
<!-- Twitter specific tags -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Bolt Design System: Page Title" />
<meta name="twitter:description" content="Sample description" />
<meta name="twitter:image" content="https://bolt-design-system.com/images/500x500-480.jpg" />
<meta name="twitter:site" content="@pega" />

Best Practices

Don't use the share tool with a page's related sections
Implement any "stickiness" and placement functionality on the platform the component is being used in
For larger screens, ease-in opacity from 0% to 100% on scroll. The placement should be lower right-hand side and fixed until the main page content is scrolled pass
Don't have the fixed position of the component overlap any "related content"

Usage

{% include "@bolt-components-share/share.twig" with {
  sources: [
    {
      name: "facebook",
      url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse"
    },
    {
      name: "twitter",
      url: "https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!"
    },
    {
      name: "linkedin",
      url: "https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com"
    },
    {
      name: "email",
      url: "mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com"
    }
  ],
  copy_to_clipboard: {
    text_to_copy: "https://boltdesignsystem.com"
  },
} only %}

Schema

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`		Defines the label text in front of the social icons.	`Share this page`
size	`string`	`small` OR `medium`	Controls the size of icons and spacing.	`medium`
align	`string`	`start`, `center`, `end`	Controls the horizontal alignment of label text and icons.	`start`
opacity	`integer`	`100`, `80`, `60`, `40`, `20`	Controls the overall transparency of the share tool.	`100`
sources	`array`	[items]: Type: `object` Properties: `name` Name of the social media source. Type: `string` `url` The specifically formed share URL with query string. Type: `string`	Social media sources to share to.	N/A
copy_to_clipboard	`object`	@bolt-components-copy-to-clipboard/copy-to-clipboard.schema.yml > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object `text` DEPRECATED This property has been renamed trigger_text Type: string `copiedText` DEPRECATED Use the custom_confirmation property instead if you need to change the confirmation text. Type: string `iconSize` DEPRECATED Use custom_trigger, custom_transition, and custom_confirmation properties if you need to change icon size. Type: string `url` DEPRECATED This property has been renamed text_to_copy Type: string `trigger_text` Text to use for the inital copy button. Ignored if the custom_trigger property is used. Type: string `text_to_copy` The text to copy to the clipboard. Type: string `custom_trigger` (optional) Custom content to show for the initial copy trigger. If you pass a link, set the URL to '#!' since it should not being followed. Type: string OR object OR array `custom_transition` (optional) Custom content to show while copy is in progress. This content will be rotated while the copying happens, so it's recommended to pass an icon. Type: string OR object OR array `custom_confirmation` (optional) Custom content to show after a successful copy. Type: string OR object OR array		N/A
inline			DPRECATED. Button version has been removed so this prop is no longer needed.	N/A
copyToClipboard			DPRECATED. Please use copy_to_clipboard.	N/A

Edit this page

Small Size

Medium Size

Opacity will make the share tool semi-transparent, and transparency goes away if user hovers over it. This should be used if you don't want the share tool to create too much distractions on first impression.

Opacity: 100

Opacity: 80

Opacity: 60

Opacity: 40

Opacity: 20

Align: start

Align: center

Align: end

xdark

dark

light

xlight

Sticky

Getting Started

Sticky makes any component sticky to the top of the page. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-sticky

Usage

{% embed "@bolt-components-sticky/sticky.twig" %}
  {% block sticky_content %}

    // Sticky content

  {% endblock %}
{% endembed %}

Table

Getting Started

Table layout for tabular content. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-table

Usage

{% include "@bolt-components-table/table.twig" with {
  headers: {
    top: {
      cells: [
        "Column 1",
        "Column 2",
        "Column 3",
      ]
    },
    side: {
      cells: [
        "Row 1",
        "Row 2",
        "Row 3",
        "Footer",
      ]
    }
  },
  rows: [
    {
      cells: [
        "R1C1",
        "R1C2",
        "R1C3",
      ]
    },
    {
      cells: [
        "R2C1",
        "R2C2",
        "R2C3",
      ]
    },
    {
      cells: [
        "R3C1",
        "R3C2",
        "R3C3",
      ]
    }
  ],
  footer: {
    cells: [
      "FC1",
      "FC2",
      "FC3",
    ]
  }
} only %}

Schema

Table layout for tabular content.

Name	Type	Value(s)	Description	Default
attributes	`object`		A Drupal-style attributes object with extra attributes to append to this component.	N/A
headers	`object`	`top` `cells` Each item represents a cell in the top header. [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object` `side` `cells` Each item represents a cell in the side header. [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object`	Generates top and side headers, each can contain an array of `cells`.	N/A
rows*	`array`	`cells` Each item represents a cell in a row. [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object`	Generates an array of rows, each can contain an array of `cells`.	N/A
footer	`object`	`cells` Each item represents a cell in the footer. [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object`	Generates a table footer, can contain an array of `cells`.	N/A
format	`string`	`regular` OR `numeric`	Display either a regular table or a more complex numeric table.	`regular`
borderless	`boolean`		Removes the vertical border in between cells.	`false`
first_col_fixed_width	`boolean`		Sets the width of the first column to be as wide as the longest text.	`false`

Edit this page

With Rows Only

R1C1	R1C2	R1C3
R2C1	R2C2	R2C3
R3C1	R3C2	R3C3

With Top Headers

Column 1	Column 2	Column 3
R1C1	R1C2	R1C3
R2C1	R2C2	R2C3
R3C1	R3C2	R3C3

With Side Headers

Row 1	R1C1	R1C2	R1C3
Row 2	R2C1	R2C2	R2C3
Row 3	R3C1	R3C2	R3C3

With Top and Side Headers

	Column 1	Column 2	Column 3
Row 1	R1C1	R1C2	R1C3
Row 2	R2C1	R2C2	R2C3
Row 3	R3C1	R3C2	R3C3

With Headers and Footer

	Column 1	Column 2	Column 3
Row 1	R1C1	R1C2	R1C3
Row 2	R2C1	R2C2	R2C3
Row 3	R3C1	R3C2	R3C3
Footer	FC1	FC2	FC3

Real Example

	Item number	Description	Assemblies
Build 2.0.1.0 — SR-49969	SR-49941	This hotfix changes Updater requirements for .NET. If you are using Updater with 7.1 or 8.0 Robotic Automation Runtime clients, you now need to have both .NET 4.0 and .NET 3.5 installed.	OpenSpan.UpdaterService.Remoting.dll OpenSpan.Updater.ServerClientInterface.dll OpenSpan.Updater.ScheduledTasks.dll OpenSpan.Updater.PrePostOperation.dll OpenSpan.Updater.Git.dll OpenSpan.VersionFinder.exe OpenSpan.UpdaterService.exe OpenSpan.Updater.X509tool.exe OpenSpan.Updater.UserHelper.exe OpenSpan.Updater.UninstallHelper.exe OpenSpan.Updater.RuntimeLauncher.exe OpenSpan.Updater.InstallHelper.exe OpenSpan.Updater.Initializer.exe
Build 1.1.360 — SR-44891	SR-44869	This hotfix changes the system to better handle long file names. It also enhances VersionFinder to sort the list of branches, making it easier to find a specific branch.	OpenSpan.Updater.Git.dll
Build 1.1.360 — SR-44891	SR-43163	This hotfix adds a list of post-update tasks to the RuntimeConfig.xml file. These tasks are run after files that match a pattern you specify are updated.	OpenSpan.Updater.Git.dll OpenSpan.Updater.Initializer.exe OpenSpan.Updater.InstallHelper.exe OpenSpan.Updater.PrePostOperation.dll OpenSpan.Updater.PreReqCheck.dll OpenSpan.Updater.RuntimeLauncher.exe OpenSpan.Updater.ScheduledTasks.dll OpenSpan.Updater.ServerClientInterface.dll OpenSpan.Updater.ServerClientInterface.Tester.exe OpenSpan.Updater.UninstallHelper.exe OpenSpan.Updater.UserHelper.exe OpenSpan.Updater.X509tool.exe OpenSpan.UpdaterService.Remoting.dll OpenSpan.UpdaterService.exe
Build 1.1.354 — SR-44889	SR-44850	This hotfix changes Updater to avoid an exception that could prevent it from correctly populating branches.	ManagedOpenSsl.dll

Numeric format is recommended for a table with numbers only, such as box scores.

Regular Format

	Pts	Reb	Ast	Stl	Blk
Michael Jordan	70	10	2	5	1
Toni Kukoc	21	15	10	3	4
Steve Kerr	5	2	20	5	0
Total	91	27	32	13	5

Numeric Format

	Pts	Reb	Ast	Stl	Blk
Michael Jordan	70	10	2	5	1
Toni Kukoc	21	15	10	3	4
Steve Kerr	5	2	20	5	0
Total	91	27	32	13	5

Remove the vertical border in between cells.

	Description	Team	Vehical Form
Optimus Prime	The awe-inspiring leader of the Autobot forces. Selfless and endlessly courageous, he is the complete opposite of his mortal enemy Megatron.	Autobots	Peterbilt Truck
Bumblebee	One of Optimus Prime's most trusted lieutenants. Although he is not the strongest or most powerful of the Autobots, Bumblebee more than makes up for this with a bottomless well of luck, determination and bravery. He would gladly give his life to protect others and stop the Decepticons.	Autobots	VW Beetle

Set column widths to be flexible.

Prop	Description	Type
attributes	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`object`
headers	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`object`
rows	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`array`
format	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`string`

Set the width of the first column to be as wide as the longest text.

Prop	Description	Type
attributes	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`object`
headers	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`object`
rows	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`array`
format	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`string`

Add attributes to table cells.

	This cell spans 2 columns and has an utility class.		Column 3	Column 4
Row 1	R1C1	R1C2	This cell spans 2 columns and has an utility class.
Row 2	R2C1	R2C2	This cell spans 2 columns, 2 rows and has an utility class.
Row 3	R3C1	R3C2	This cell spans 2 columns, 2 rows and has an utility class.
Footer	This cell spans 2 columns and has an utility class.		FC3	FC4

xdark

	Column 1	Column 2	Column 3
Row 1	R1C1	R1C2	R1C3
Row 2	R2C1	R2C2	R2C3
Row 3	R3C1	R3C2	R3C3
Footer	FC1	FC2	FC3

dark

	Column 1	Column 2	Column 3
Row 1	R1C1	R1C2	R1C3
Row 2	R2C1	R2C2	R2C3
Row 3	R3C1	R3C2	R3C3
Footer	FC1	FC2	FC3

light

	Column 1	Column 2	Column 3
Row 1	R1C1	R1C2	R1C3
Row 2	R2C1	R2C2	R2C3
Row 3	R3C1	R3C2	R3C3
Footer	FC1	FC2	FC3

xlight

	Column 1	Column 2	Column 3
Row 1	R1C1	R1C2	R1C3
Row 2	R2C1	R2C2	R2C3
Row 3	R3C1	R3C2	R3C3
Footer	FC1	FC2	FC3

Pass different items into cells

	Item number	Description	Assemblies
Build 2.0.1.0 — SR-49969	SR-49941	This hotfix changes Updater requirements for .NET. If you are using Updater with 7.1 or 8.0 Robotic Automation Runtime clients, you now need to have both .NET 4.0 and .NET 3.5 installed.	OpenSpan.UpdaterService.Remoting.dll OpenSpan.Updater.ServerClientInterface.dll OpenSpan.Updater.ScheduledTasks.dll OpenSpan.Updater.PrePostOperation.dll OpenSpan.Updater.Git.dll OpenSpan.VersionFinder.exe OpenSpan.UpdaterService.exe OpenSpan.Updater.X509tool.exe OpenSpan.Updater.UserHelper.exe OpenSpan.Updater.UninstallHelper.exe OpenSpan.Updater.RuntimeLauncher.exe OpenSpan.Updater.InstallHelper.exe OpenSpan.Updater.Initializer.exe
Build 2.0.1.0 — SR-49969	SR-44869	UTF-8	OpenSpan.Updater.Git.dll
Build 1.1.360 — SR-44891	SR-43163	This hotfix adds a list of post-update tasks to the RuntimeConfig.xml file. These tasks are run after files that match a pattern you specify are updated.
Build 1.1.360 — SR-44891	SR-44850	This hotfix changes Updater to avoid an exception that could prevent it from correctly populating branches.	ManagedOpenSsl.dll

Teaser

Getting Started

Teaser block. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-teaser

Usage

{% include "@bolt-components-teaser/teaser.twig" with {
  content: "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.",
  buttons: [
    {
      pattern: "button",
      style: "primary",
      text: "CTA 1"
    },
    {
      pattern: "button",
      style: "secondary",
      text: "CTA 2"
    }
  ]
} only %}

Schema

Name	Type	Value(s)	Description	Default
eyebrow	`object`	@bolt-components-headline/headline.schema.yml > Object details `text` Renderable text content of the headline. Type: string OR object OR array `tag` Html tag. Type: string `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `span`, `cite`, `div` `align` Text alignment. Type: string `left`, `center`, `right` `weight` Font weights. Type: string `bold`, `regular`, `semibold` `style` Font styles. Type: string `normal` OR `italic` `size` Font size. Type: string `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`, `xxxlarge` `transform` Text transformation. Type: string `uppercase`, `lowercase`, `capitalize` `url` If provided, turns headline into a link to given url. Type: string `icon` Bolt icon. Accepts either 1) an icon name as a string 2) an icon object as expected by `@bolt-components-icon` or 3) the string "none" to explicitly remove default icons Type: `quoted` Adds quoted styling to text. Type: boolean	Eyebrow text component	N/A
headlines	`array`	[items]: Type: `object` Headline text components Properties:	An array of headline component objects	N/A
logo	`object`	@bolt-components-logo/logo.schema.yml > Object details `invert` Set to true to invert the logo colors. Type: boolean	Bolt logo component	N/A
content	`string`		Body text of teaser	N/A
contentItems	`array`	[items]: Type: `object` Properties:	Array of content item objects	N/A
buttons	`array`	[items]: Type: `object` A button Properties:	An array of button component objects	N/A

Edit this page

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.

Eyebrow

This is a headline.

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.

Text

Getting Started

New (still in progress) Text component. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-text

Web Component

Bolt Text is a web component, which means you can use the custom tag bolt-text to render it.

<bolt-text>
  This is a piece of text.
</bolt-text>

Common Settings

Common props that bolt-text accepts.

display=""

Inline text or a block of text.

block

<bolt-text
  tag="div"
  display="block"
>
  This is a block of text.
</bolt-text>

inline

Here, you can set some
<bolt-text
  tag="span"
  display="inline"
  font-style="italic"
>
  inline text
</bolt-text>
that is italic.

tag=""

You can set semantic tag to reflect the kind of text you are rendering.

<bolt-text
  tag="h1"
>
  Make this the h1 because it's the most important text on the page.
</bolt-text>

color=""

You can assign theme variables to the text color. Currently 2 variables are enabled, theme-headline and theme-body. theme-headline will produce the Headline Color, and theme-body will produce the Body Text Color. Both colors are defined in all of our themes. By assigning text colors this way, the design will always stay consistent and always work with a theme.

<bolt-text
  color="theme-headline"
>
  This piece of text has the Headline Color from the theme.
</bolt-text>

<bolt-text
  color="theme-body"
>
  This piece of text has the Body Text Color from the theme.
</bolt-text>

Additional Settings

Prop	Values	Default
line-height	`tight`, `regular`, `loose`	`regular`
align	`inherit`,`left`, `center`, `right`	`inherit`
letter-spacing	`narrow`, `regular`, `wide`	`regular`
text-transform	`regular`, `uppercase`, `lowercase`, `capitalize`	`regular`
font-family	`headline`, `body`, `code`	`body`
font-size	`xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`, `xxxlarge`	`medium`
font-weight	`regular`, `semibold`, `bold`	`regular`
font-style	`regular`, `italic`	`regular`
opacity	`100`, `80`, `60`, `40`, `20`	`100`
quoted	(This is a boolean prop)
url	(This is a string, for example: http://pega.com)

Utilities (overrides)

Use any Bolt utility to override the design.

util=""

<bolt-text
  util="margin-bottom-large, padding-top-small, color-indigo"
>
  This piece of text has utility overrides.
</bolt-text>

Typographic Recipes

Using the shorthand method allows for consistency while also leaving room for customizations. The following are the official recipes for each piece of our typography. They will cover all common use cases. Only in edge cases, you'd want to break away and create your own recipes.

Prop	Values	Default
eyebrow	(This is a boolean prop)
headline	(This is a boolean prop)
subheadline	(This is a boolean prop)

Eyebrow

<bolt-text eyebrow>
  This is an Eyebrow
</bolt-text>

By using the eyebrow boolean attribute, the following attribute defaults are being set:

font-size: xsmall
font-family: headline
color: theme-headline
line-height: tight
letter-spacing: wide
transform: uppercase
opacity: 80

Headline

<bolt-text headline>
  This is a Headline
</bolt-text>

By using the headline boolean attribute, the following attribute defaults are being set:

tag: h2
font-size: xlarge
font-family: headline
color: theme-headline
letter-spacing: narrow
weight: bold

XXXL Headline

<bolt-text headline
  font-size="xxxlarge"
>
  This is a XXXL Headline
</bolt-text>

XXL Headline

<bolt-text headline
  font-size="xxlarge"
>
  This is a XXL Headline
</bolt-text>

XL Headline

<bolt-text headline
  font-size="xlarge"
>
  This is a XL Headline
</bolt-text>

L Headline

<bolt-text headline
  font-size="large"
>
  This is a L Headline
</bolt-text>

S Headline

<bolt-text headline
  font-size="small"
>
  This is a S Headline
</bolt-text>

To render all sizes of headlines, all you have to do is change font-size to your desired size. Note: if set to xxxlarge and the title exceeds 60 characters, the font size will scale down from 3.083rem to 2.275rem.

XS Headline

<bolt-text headline
  font-size="xs"
  text-transform="uppercase"
  letter-spacing="wide"
>
  This is a XS Headline
</bolt-text>

XS headline is a special case and should be used sparingly. In addition to font-size, text-transform and letter-spacing also need to be defined.

Subheadline

<bolt-text subheadline>
  This is a subheadline
</bolt-text>

By using the subheadline boolean attribute, the following attribute defaults are being set:

font-size: large
font-family: headline
color: theme-headline

XXL Subheadline

<bolt-text subheadline
  font-size="xxlarge"
>
  This is a XXL subheadline
</bolt-text>

XL Subheadline

<bolt-text subheadline
  font-size="xlarge"
>
  This is a XL subheadline
</bolt-text>

L Subheadline

<bolt-text subheadline
  font-size="large"
>
  This is a L subheadline
</bolt-text>

To render all sizes of subheadlines, all you have to do is change font-size to your desired size.

Usage

// Web Component

  This is text.


// Twig
{% include "@bolt-components-text/text.twig" with {
  text: "This is text."
} only %}

Schema

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`		Text content of the headline.	N/A
tag	`string`	`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `div`, `span`	HTML semantic tags.	`p`
display	`string`	`inline` OR `block`	Inline text or a block of text.	`block`
color	`string`	`theme-headline` OR `theme-body`	Text color in context of theme colors.	`theme-body`
line-height	`string`	`tight`, `regular`, `loose`	Line height in context of the typographic design.	`regular`
align	`string`	`inherit`, `left`, `center`, `right`	Text alignment.	`inherit`
letter-spacing	`string`	`narrow`, `regular`, `wide`	Letter spacing in context of the typographic design.	`regular`
text-transform	`string`	`regular`, `uppercase`, `lowercase`, `capitalize`	Transform controls the type case. Please note that capitalize would capitalize the first letter of each word, it is not the same as title case.	`regular`
font-family	`string`	`headline`, `body`, `code`	Font family in context of the typographic design.	`body`
font-size	`string`	`xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`, `xxxlarge`	Font size in context of the typographic design.	`medium`
font-weight	`string`	`regular`, `semibold`, `bold`	Font weight in context of the typographic design.	`regular`
font-style	`string`	`regular` OR `italic`	Emphasized text.	`regular`
opacity	`number`	`100`, `80`, `60`, `40`, `20`	Opacity level.	`100`
quoted	`boolean`		Quoted text.	`false`
url	`string`		If provided, turns headline into a link to given url.	N/A
headline	`boolean`		A preset for headlines in context of the typographic design.	`false`
subheadline	`boolean`		A preset for subheadlines in context of the typographic design.	`false`
eyebrow	`boolean`		A preset for eyebrow in context of the typographic design.	`false`
util	`array`		Each item in the array will build a utility class. No need to include `u-bolt-`. For the web component use comma separated string.	N/A

Edit this page

Typographic Design

The following are the official recipes for each piece of our typography. They will cover all common use cases. Only in edge cases, you'd want to break away and create your own recipes.

Headlines

This Is the XXXLarge Headline

This Is the XXLarge Headline

This Is the XLarge Headline

This Is the Large Headline

This Is the Small Headline

This Is the XSmall Headline

Subheadlines

This Is the XXLarge Subheadline

This Is the XLarge Subheadline

This Is the Large Subheadline

Eyebrow

This Is the Eyebrow

Paragraph

This is regular text in a paragraph. You can make a word italic or bold, because text can be displayed inline or block.

The entire paragraph can be italic.

The entire paragraph can be bold.

Example Lockup in Different Themes

This is an eyebrow

This is a headline

This is a subheadline

This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante.

This is an eyebrow

This is a headline

This is a subheadline

This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante.

This is an eyebrow

This is a headline

This is a subheadline

This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante.

This is an eyebrow

This is a headline

This is a subheadline

This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante.

This is regular text using inherit align

This is regular text using left align

This is regular text using center align

This is regular text using right align

This eyebrow is a link

This headline is a link

This subheadline is a link

This regular text is a link

This piece of text is also a quote.

This headline is also a quote.

Tooltip

Getting Started

Tooltip component. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-tooltip

Description

The tooltip component provides the user with a onHover Or onClick (button) toggle to display nearly any kind of content or Bolt Component nested within.

Use Cases (not limited to)

Help text
Navigational assistance (such as language select)
Used within other components, such as Share, to enhance functionality and presentation

Best Practices

Toggle icons should be tested to ensure smooth transition states
The noWrap option should only be used when small snippets of text or content are used

Usage

{% include "@bolt-components-tooltip/tooltip.twig" with {
  trigger: {
    type: "text",
    text: "Trigger Text"
  },
  content: "Here is a tooltip! And it even comes with a button toggle!"
} only %}

Schema

Name	Type	Value(s)	Description	Default
trigger*	`object`	`type` What kind of trigger are we using? `text` OR `button` `text` The text for our trigger `transform` Trigger text transformation `uppercase`, `lowercase`, `capitalize` `icon` Properties for including an icon with our trigger `name` Name of the icon to be used `size` Size of the icon `small`, `medium`, `large`, `xlarge` `toggle` If using a `button` set optional toggle text / icon `text` The text for our toggle `name` The icon for our toggle	Provides the data for our trigger type	N/A
content*	`any`		This can be text OR an included bolt component (like Block List)	N/A
direction	`string`	`up` OR `down`	Should tooltip push up or down?	`up`
noWrap	`boolean`	`TRUE` OR `FALSE`	`true` for single line content (short snippets)	`false`
spacing	`string`	`none`, `xsmall`, `small`, `medium`	Spacing within our tooltip content bubble	`small`

Edit this page

Unordered List

Getting Started

Stylistic bulleted list for article content. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-unordered-list

Usage

{% include "@bolt-components-unordered-list/unordered-list.twig" with {
  contentItems: [
    {
      text: "Do not include any data or information in your posts that are confidential!"
    },
    {
      text: "Apply basic practices for collaborative work."
    },
    {
      text: "Be honest, respectful, trustworthy and helpful."
    },
    {
      text: "Answer questions authoritatively and concisely. Avoid cluttering discussions with noise."
    }
  ]
} only %}

Schema

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`	[items]: Type: `object` A single list item object with either a `text` or `contentItems` key Properties: `text` Item text Type: `string` `contentItems` Items pass to `@bolt/text.twig` Type: `array`	The content items These are all of the items in the ordered list	N/A

Edit this page

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: xlight

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: light

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: dark

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: xdark

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Do not include any data or information in your posts that are confidential!

Apply basic practices for collaborative work.

Be honest, respectful, trustworthy and helpful.

Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Video

Getting Started

Stylistic video. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/video

Usage

{% include "@bolt/video.twig" with {
  videoId: "5609376179001",
  accountId: "1900410236",
  playerId: "r1CAdLzTW",
  showMeta: true,
  showMetaTitle: false
} only %}

Schema

Name	Type	Description	Default
attributes	`object`	A Drupal-style attributes object with extra attributes to append to this component.	N/A
videoId	`string` OR `number`	Brightcove ID for this video.	N/A
playerId	`string`	Brightcover Player ID.	N/A
accountID	`string` OR `number`	ID of the Brightcove account that owns the video.	N/A
videoUuid	`string`	A unique identifying string, randomly generated if not provided.	N/A
ratio	`boolean`	Maintain video ratio.	N/A
collapsed	`boolean`	Should the video be collapsed on load.	N/A
showMeta	`boolean`	Should the video show meta data.	`true`
showMetaTitle	`boolean`	Should the video show meta title.	`true`
controls	`boolean`	Should the video controls be available.	`true`
autoplay	`boolean`	Should the video auto-play on load.	`false`
loop	`boolean`	Should the video loop.	`false`
isBackgroundVideo	`boolean`	Set to true if the video is a background.	`false`

Edit this page

This video has showMeta set to true and showMetaTitle set to true.

This video has showMeta set to false.

This video has showMeta set to true and showMetaTitle set to false.

This video has controls set to false, you cannot interact with the video player but you can create external control to interact with it:

This video has external controls:

This video has an inline script.

This video has external controls and an inline script:

This video has attributes for email share. Inline script is required for the email share.

This video is coming from the band's background.

This video has showMetaTitle set to false to hide the title from the video player, so you can pass the title to other markup.

Figure and Figcaption

EE: Transforming the Customer Journey Through 1:1 Customer Engagement (Suzanne Woolley)

Headline with Video

EE: Transforming the Customer Journey Through 1:1 Customer Engagement (Suzanne Woolley)

Bolt video player with HTML on the page before the JS runs. The HTML for this was from copying and pasting in the HTML from Pattern Lab's copy to clipboard.

Bolt video player markup that's dynamically injected into the page. Markup being injected was properly copied over from Pattern Lab's HTML example.

Inject video player