card docs

2.13.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
Overview Usage Schema Edit this page Testing Steps

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

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

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:

Customer Engagement Summit Amsterdam Customer Engagement Summit Amsterdam
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:

Customer Engagement Summit Amsterdam Customer Engagement Summit Amsterdam
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:

Customer Engagement Summit Amsterdam Customer Engagement Summit Amsterdam
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:

Customer Engagement Summit Amsterdam Customer Engagement Summit Amsterdam
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