2.7.0

Card

Card Component in Bolt

Published

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

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