card docs

2.10.0

Card

Card Component in Bolt

Published

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

Overview

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", contentItems: [ { pattern: "image", src: "/images/sample/anthem-video.jpg", alt: "Anthem Video" }, { pattern: "eyebrow", text: "Video" }, { pattern: "headline", tag: "h3", size: "large", text: "Anthem: Service Desktop" }, { pattern: "text", text: "Anthem debuts its next-generation service desktop, driving frictionless customer experiences." }, { pattern: "button", width: "full", text: "Get the report" } ] } only %}

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
tag

Html tag immediately within the bolt-card element.

 string —
  • div, article, section, figure
content_tag

Html tag immediately within the bolt-card element.

 string —
  • div, article, section, figcaption
theme

Bolt theme.

 string —
  • xlight, light, dark, xdark
url

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

 string —
  • —
Overview Usage Schema Edit this page Testing Steps

card

Video

Anthem: Service Desktop

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

Get the report

card with two buttons

Video

Anthem: Service Desktop

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

Learn More
Weitere Informationen

card with video

Current Time 0:00
Duration 0:00
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
 
1x

Video

Video Meta Title Goes Here.

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

Play or Pause

card with teaser

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.

Learn More
Weitere Informationen

card band variation

Cards in a band

Eyebrow

Headline

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

Button

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.

Get the report

Video

Anthem: Service Desktop

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

Button 1
Button 2

Video

Anthem: Service Desktop

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

Get the report

Individual themed cards in a band w/ background image

Video

Anthem: Service Desktop

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

Get the report

Video

Anthem: Service Desktop

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

Button 1
Button 2

Video

Anthem: Service Desktop

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

Get the report

Non-themed cards in a band w/ background image

Video

Anthem: Service Desktop

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

Get the report

Video

Anthem: Service Desktop

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

Button 1
Button 2

Video

Anthem: Service Desktop

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

Get the report

personalized card example client rendered tests

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.

Get the report

After:

Video

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

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

Get the report

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

Before:

Philips Healthcare develops apps faster See how Philips Healthcare uses the latest in Digital Process Automation (DPA) to improve health outcomes and foster patient engagement.
  • View highlights

After:

Philips Healthcare develops apps faster See how Philips Healthcare uses the latest in Digital Process Automation (DPA) to improve health outcomes and foster patient engagement.
  • View highlights

Personalized card test, client-rendered, without a delay

Before:

Philips Healthcare develops apps faster See how Philips Healthcare uses the latest in Digital Process Automation (DPA) to improve health outcomes and foster patient engagement.
  • View highlights

After:

Philips Healthcare develops apps faster See how Philips Healthcare uses the latest in Digital Process Automation (DPA) to improve health outcomes and foster patient engagement.
  • View highlights

personalized card example server rendered tests

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.

Get the report

After:

Video

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

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

Get the report

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

Before:

Philips Healthcare develops apps faster

See how Philips Healthcare uses the latest in Digital Process Automation (DPA) to improve health outcomes and foster patient engagement.
  • View highlights

After:

Philips Healthcare develops apps faster

See how Philips Healthcare uses the latest in Digital Process Automation (DPA) to improve health outcomes and foster patient engagement.
  • View highlights

Personalized card test, server-rendered, without delay

Before:

Philips Healthcare develops apps faster

See how Philips Healthcare uses the latest in Digital Process Automation (DPA) to improve health outcomes and foster patient engagement.
  • View highlights

After:

Philips Healthcare develops apps faster

See how Philips Healthcare uses the latest in Digital Process Automation (DPA) to improve health outcomes and foster patient engagement.
  • View highlights