NewsJoin us for Bolt X NYC – An event to lorem ipsum dolor set emt

Hide classes

CenteredMedia

Image

VideoFile

ModalVideo

Play in Place external source

General

In general, our motion wants to reflect the effortless, lightning speed of Bolt’s check out process.

Download the graphic

Bolts

Here are a few examples of how we animate lightning bolts.

Download the graphic

Exclusive Data

How To Create Lifetime Customers

Learn what real shoppers want from their shopping experiences and how your brand can create happy, lifetime customers.

IconCards

theme: stats

Video Cards

theme: icons

Large Layout Cards

OffBleedImageBanner

Button Test

Heros

Standard hero with image and background svg

Hero with overline, overflowVisible set to true, and mobileImageTop set to true

Hero with lottie

Hero with overline, overflowVisible set to true, and mobileImageTop set to true

Standard style hero with Modal Button with Form

Grid

Use debug={true} on Grid components to show gutters, column widths and content areas.

Use the width prop on Column components to specify how much of the 12 column grid they should fill

Use a custom type prop to specify which element the Grid, Row and Column components should use (nav, ul and li are used below)

Use extend={true} on Grid components to extend the grid beyond it's maximum width.

Use extend={true} on Row and Column components to remove their padding.

Use wrap={false} on Row components to prevent columns from wrapping at the primary breakpoint.

Use reverse={true} on Grid components to set the flex-direction of all Row components in the Grid to row-reverse. The flex-direction will switch to column at the primary grid breakpoint. The same props can apply to individual Row components as well.

Use reverse={`alternate`} on Grid components to set the flex-direction of all even Row components in the Grid to row-reverse. The flex-direction of reversed rows will switch to column at the primary grid breakpoint.

Use reverse={`onResponsive`} on Grid or Row components to set the flex-direction of rows to reverse at the primary grid breakpoint.

Use align={`center | flex-start | flex-end`} on Row components to specify how Column components inside rows should align.

Typography (h1, .h1)

h2, .h2

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae facere minima quisquam vel repudiandae ullam fugiat reiciendis possimus odit dicta nesciunt voluptate facilis accusantium, natus odio aliquid. A ab voluptatibus maxime sit illum placeat dignissimos, facilis fugiat eum. Ad, aliquam asperiores veniam quo ducimus autem assumenda neque! Cupiditate consequatur, atque explicabo repellendus, ab tempore ipsa, obcaecati odio veritatis tenetur hic?

h3, .h3

.h4--large

h4, .h4

.h4--light

h5, .h5

h6, .h6

.p--xl

.p--lg

.p--lg-longform

p, .p

.p--longform

.p--sm

.p--xs

.p--xxs

.overline--xs

Lorem ipsum dolor

Button

theme={`default`}

theme={`default`}
disabled

theme={`default2white`}

theme={`default2white`}
disabled

theme={`lightningYellow`}

theme={`lightningYellow`}
disabled

theme={`lightningYellow2white`}

theme={`lightningYellow2white`}
disabled

PlayButton

theme={`default`}

theme={`lightningYellow`}

CtaText

theme={`default`}

CtaTextArrow

Media Blocks

VideoBlock

Options for w/ or w/out modal

Sliders

The Slider component is a utility component that wraps an instance of and allows any child elements to be passed into it. Each child element will become a new slide. The Flickity details all of the options that can be passed into the slider with sliderOptions={{...}} and examples can be seen below for many of the options as well as the custom props that have been created for the Slider.

The default, draggable Slider (no arrows, autoplay, wrap, overflow, etc) 👇

Slider with arrows={{enabled: true}} 👇

Slider with arrows={{enabled: true, style={`overlay`}}} 👇

Slider with overflow={true} 👇

A Slider with sliderOptions={{autoPlay: 2500}} (pauses when hovered, stops when dragged) 👇

A Slider with arrows={{enabled: true, style: `overlay`}} sliderOptions={{wrapAround: true}} 👇

A Slider with dots={{enabled: true}} 👇

The arrows and dots objects both accept aboveResponsive and belowResponsive props (both default to true) that specify if the control should appear above or below the primary breakpoint. A slider with arrows={{enabled: true, belowResponsive: false}} and dots={{enabled: true, aboveResponsive: false}} 👇

HeroGatedContent

Basic

basic w/textUnderform, arrowCta, formArrow

w/ platform Tiles

w/ Overline, formImageHeader, formArrow and mobileUnderForm content

PostSlider

The PostSlider component uses the Slider Utility component to create a slider of posts.
This component has the following props: heading, postType, mobileBackgroundSvg, posts
The default slider dots are modified to be thin lines vs circles and the arrows make use of the flickityRef to trigger next() and previous()

heading is an optional prop
postType is a required prop with only two options: caseStudyCard or engagementCard
mobileBackgroundSvg is an optional prop but will only apply apply with the caseStudyCard postType
posts is a required prop used to render the cards within the slider.

A PostSlider with heading={"Real case studies."} postType={"caseStudyCard"}

A PostSlider with heading={false} postType={"engagementCard"}

On desktop this PostSlider variation renders individual engagementCard components

On mobile it hides the PostSlider and renders the engagementCards component

Media Slider

Engagement Cards

This component has two props: heading and cards

heading is an optional prop
cards is an array of engagement cards. It renders the Card component inside.
cach card has the following fields: overline, heading, link, image

Slide Toggles

These components will be rewritten soon to avoid use of jQuery.

SlideTrigger, SlideToggle and SlideGroup are utility components that wrap to animate the hiding and showing of elements. Additional attributes and functionality have been added as well for accessibility purposes.

SlideTrigger should wrap the element that should trigger the hide / show animation, SlideToggle should wrap the element that should hide and show, and SlideGroup should wrap groups of multiple SlideTrigger and SlideToggle pairs. SlideTrigger and SlideToggle should be placed directly adjacent to each other and SlideTrigger should always come before SlideToggle. Each SlideTrigger / SlideToggle pair can be wrapped in additional components or elements as well.

When active, SlideTrigger and SlideToggle both have an active class applied to allow the styling of the active state to be adjusted. The name of the active class can be changed by passing a custom activeClass to SlideTrigger.

For accessibility, to indicate the action that will be performed by interacting with the trigger, a title string can be passed in as a prop to SlideTrigger to add title and aria-label attributes to the SlideTrigger (ex. "Show answer"). SlideTrigger components are also keyboard-focusable with the tab key and can be toggled with the space bar and Enter key when selected.

If a SlideTrigger / SlideToggle pair should be active and open by default, pass active={`true`} to the SlideTrigger. In a SlideGroup, if only one SlideTrigger and SlideToggle should be active at a time, add onlyOne={`true`} to the SlideGroup props. Additional options from the such as duration can be passed into SlideTrigger through the options prop.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo sed dolorum eaque qui architecto! Quod ratione incidunt quos velit sint explicabo ipsam eveniet id provident autem quo at est molestias repudiandae illo delectus, consectetur sapiente, illum voluptatem quibusdam eos harum. Nesciunt sed quae dolorum dolore repellat tenetur id illum minus!

Expander Button

The ExpanderButton is a similar component used in the old code base. Shown here is an example of a QA group with headers in a loop. It requires a different set of JQuery and I assume it will be phased out and/or combined with the SlideToggle. ExpandGroup wraps the both the shown and hidden items and ExpanderButton wraps the trigger. Hide/show is controlled by .active class in CSS.

Expander Button Questions

The Bolt Network and Bolt One Click Checkout

Modals

The ToggleModal component can be used to hide and show modals, and the ModalVideo, and Modal components can be used to display videos and other types of content in popup windows. Any content that is vertically overflowing inside .modal__content will be scrollable and the html element will automatically be set to overflow: hidden when a Modal is active. Click the X or anywhere outside the inner content of the modal to close it, or set the clickToClose prop to false on your Modal or ModalVideo to only allow it to be closed when the X is clicked.

ToggleModal requires an action prop that must be equal to `show` or `hide`, Modal requires at least one child node to be passed into it, and VideoModal requires a src prop that must be a string.

When using ToggleModal with action={`show`}, be sure to pass a valid document.querySelector value to the targetModal prop so that it knows which Modal to toggle (targetModal={`.modal__example`} will target a Modal with className={`modal__example`}). Be sure that targetModal values are individualistic, as the incorrect Modal can be targeted if there are multiple Modal components on a page and the value is not specific to a single modal.

Controls have been added to Video and VideoModal to allowfullscreen per Daniel. Wistia is the default embed type and youTube prop has been added to these components to allow the YouTube fullscreen option

Heading

Transparent GIF to Video conversion

Follow these steps to convert GIFs with transparent backgrounds into videos that can be used across browsers.

GIF to anpng conversion

Before converting, resize the GIF to 2x of the desired container using ezgif.com

Then convert the resized GIF to anpng using freeconvert.com

Anpng to Webm

Use MConvertor to create Webm version of the video.

Webm to H.265 encoded mp4 with Alpha channel

Download and Install Shutter Encoder. And follow these steps in order:

1: Drag webm file into the app
2: On left, Choose function: H.265. The arrow next to it should default to .mp4
3: At bottom of screen, select Hardware acceleration: OSX VideoToolbox
4: On the right, open Advanced Features and select Enable alpha channel

Using video sources in component

FeatureCards component has a succesful example of a cross browser transparent BG video. The media.video backend component has a transparent_BG_mp4 option under fileType. The video tag must have two source tags. This source must come before the webm version of the same video.

FeatureCards

MerchantToolkit Tabs element

LogoScroller

QuoteBlockSlider

QuoteSingle

with divider for testing

QuoteBanner

Quote Callout

FeaturedIn

ZLayoutContent

Ticker

ModalAndVideoSection

TwoColumnSection

TwoColumnChecklistSection

For SSO page

ThreeColumnSection

centered, with copy function

ThreeColumnSection

Two Column Complex Section

JobList

MixedUseSlider

Divider

FeatureCards2

CtaArrow

SvgTextLink

ScrollingTextAnimation

MarketoForm

Form with full width button

Add attribute: submitButtonFullWidth={true}

Add attribute: submitButtonText={`Custom Button Text`}

Add attribute: disclaimer={`<p>All fields required. By submitting this form you are agreeing to Bolt's <a href="/privacy">Privacy Policy</a> and <a href="/terms">Terms of Use</a></p>`}

Form with Underline style

Add attribute: underlineStyle={true}

Form with Arrow Submit

Add attribute: submitArrow={true}

Contact Cards

Cards

Product screenshots

Need some screenshots? We’ve got you. Get high-resolution images of the Bolt checkout on desktop and mobile.

Download

Leadership photos

Need a headshot or two for your article, or feature story? Here you'll find high-res. headshots of our executive team.

Download

Fraud Calculator

Revenue Calculator

Card Grid

Language

Bolt is the world’s first checkout experience platform, connecting millions of shoppers to retailers in a unified cross-brand network. Forward thinking retailers like Swiss Gear, Badgley Mischka and hundreds of others rely on Bolt to convert, retain and delight shoppers. People have more options than ever when shopping online, and retailers need to provide the best experience or customers will move on. Bolt solves the complicated technological challenges involved in checkout, fraud detection, and digital wallets, so that retailers can devote their energy to what matters most—growing their product, brand, and customer base.

Backlinks and tags

When posting about Bolt, please include a link back to Bolt.com, unless another link is suggested for inclusion by Bolt. Bolt should be referred to as a platform, rather than a product.

Bolt fact sheet

Looking for quick facts about Bolt? Here you'll find information about our funding, investors, employee count, key products, customer success stories and more.

InstallPlatforms and DocumentationCards

TestimonialTiles

SectionWithStickyNav

AwardWinningCallout

LocationCards

LocationList

Integrations

FooterCallout

FooterCallout With Marketo Signup

Component Spacing Classes

These classes are available in the cms to choose how much vertical space to add in between components using margins & padding. These should be used and available on every component intended to work in strapi dynamic zones.

The following examples are using the values defined in \frontend\src\styles\scss\01-config\_index.scss
$spacingValue: 100;
$spacingValue--xs: $spacingValue * 0.5;
$spacingValue--sm: $spacingValue * 0.75;
$spacingValue--lg: $spacingValue * 1.5;
$spacingValue--xl: $spacingValue * 2;
$spacingMobileMulti: 0.66;

The spacing values are used in the vw() for scaling on these classes for desktop and mobile.

.marginTop {
   margin-top: vw($spacingValue * $spacingMobileMulti, mobile)
   @media (min-width: #{$siteMax--mobile}px) {
      margin-top: vw($spacingValue);
   }
}

.marginTop--none : 0px
.marginTop--xs : 50px
.marginTop--sm : 75px
.marginTop : 100px
.marginTop--lg : 150px
.marginTop--xl : 200px
.marginTop--custom : unset

.marginBottom--none : 0px
.marginBottom--xs : 50px
.marginBottom--sm : 75px
.marginBottom : 100px
.marginBottom--lg : 150px
.marginBottom--xl : 200px
.marginBottom--custom : unset

.paddingTop--none : 0px
.paddingTop--xs : 50px
.paddingTop--sm : 75px
.paddingTop : 100px
.paddingTop--lg : 150px
.paddingTop--xl : 200px
.paddingTop--custom : unset

.paddingBottom--none : 0px
.paddingBottom--xs : 50px
.paddingBottom--sm : 75px
.paddingBottom : 100px
.paddingBottom--lg : 150px
.paddingBottom--xl : 200px
.paddingBottom--custom : unset

We should try to find the value of spacing closest to figma by rounding to the nearest value.

If it is drastically different, we can create a rule specific to the component inside the components stylesheet using the custom classes like the following :

.ComponentName .marginTop--custom

.ComponentName .marginBottom--custom

.marginTop--none .marginBottom--none

.paddingTop--none .paddingBottom--none

.marginTop--xs .marginBottom--xs

.paddingTop--xs .paddingBottom--xs

.marginTop--sm .marginBottom--sm

.paddingTop--sm .paddingBottom--sm

.marginTop .marginBottom

.paddingTop .paddingBottom

.marginTop--lg .marginBottom--lg

.paddingTop--lg .paddingBottom--g

.marginTop--xl .marginBottom--xl

.paddingTop--xl .paddingBottom--xl

.marginTop--custom .marginBottom--custom

.paddingTop--custom paddingBottom--custom

Hide classes

CenteredMedia

Image

VideoFile

ModalVideo

Play in Place external source

General

Bolts

How To Create Lifetime Customers

IconCards

theme: stats

Video Cards

theme: icons

Large Layout Cards

OffBleedImageBanner

Button Test

Heros

Grid

Typography (h1, .h1)

h2, .h2

h3, .h3

.h4--large

h4, .h4

.h4--light

h5, .h5

h6, .h6

.p--xl

.p--lg

.p--lg-longform

p, .p

.p--longform

.p--sm

.p--xs

.p--xxs

.overline--xs

Button

PlayButton

CtaText

CtaTextArrow

Media Blocks

VideoBlock

Sliders

HeroGatedContent

Basic

basic w/textUnderform, arrowCta, formArrow

w/ platform Tiles

w/ Overline, formImageHeader, formArrow and mobileUnderForm content

PostSlider

Media Slider

Engagement Cards

Slide Toggles

Lorem ipsum dolor

Sit amet consectetur

Adipisicing elit

Expander Button

Expander Button Questions

The Bolt Network and Bolt One Click Checkout

Modals

Heading

Transparent GIF to Video conversion

GIF to anpng conversion

Anpng to Webm

Webm to H.265 encoded mp4 with Alpha channel

Using video sources in component

FeatureCards

MerchantToolkit Tabs element

MerchantToolkit Banner element

MerchantToolkit Embeddable Badge element

LogoScroller

QuoteBlockSlider

QuoteSingle

QuoteBanner

Quote Callout

FeaturedIn

ZLayoutContent

Ticker

ModalAndVideoSection

TwoColumnSection

TwoColumnChecklistSection

For SSO page