Bolt Design System

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

Published

Overview

Install via NPM

Description

Best Practices

Usage

Schema