2.5.2

Card

Card Component in Bolt

Published

History

View changes

Install

yarn add @bolt/components-card

Source code

View on Github

Dependencies

@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`
contentTag	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`	—	—