card docs

2.12.1

Card

Card Component in Bolt

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
  {% 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 %}

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

card

Anthem VideoAnthem Video

Video

Anthem: Service Desktop

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

card with two buttons

Anthem VideoAnthem Video

Video

Anthem: Service Desktop

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

card with video

Video

Video Meta Title Goes Here.

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

card with teaser

Anthem VideoAnthem Video

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.

card band variation

Cards in a band

Anthem VideoAnthem Video

Eyebrow

Headline

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

Anthem VideoAnthem Video

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

Anthem VideoAnthem Video

Video

Anthem: Service Desktop

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

Anthem VideoAnthem Video

Video

Anthem: Service Desktop

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

Anthem VideoAnthem Video

Video

Anthem: Service Desktop

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

Individual themed cards in a band w/ background image

Anthem VideoAnthem Video

Video

Anthem: Service Desktop

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

Anthem VideoAnthem Video

Video

Anthem: Service Desktop

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

Anthem VideoAnthem Video

Video

Anthem: Service Desktop

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

Non-themed cards in a band w/ background image

Anthem VideoAnthem Video

Video

Anthem: Service Desktop

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

Anthem VideoAnthem Video

Video

Anthem: Service Desktop

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

Anthem VideoAnthem Video

Video

Anthem: Service Desktop

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

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

Before:

Anthem VideoAnthem Video

Video

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

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

After:

Anthem VideoAnthem Video

Video

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

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

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

Before:

Anthem VideoAnthem Video

Video

Personalized card, client-rendered, with a small delay (before)

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

After:

Anthem VideoAnthem Video

Video

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

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

Personalized card test, client-rendered, without a delay

Before:

Anthem VideoAnthem Video

Video

Personalized card, client-rendered, without a delay (before)

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

After:

Anthem VideoAnthem Video

Video

Personalized card, client-rendered, without a delay (after)

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

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

Before:

Anthem VideoAnthem Video

Video

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

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

After:

Anthem VideoAnthem Video

Video

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

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

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

Before:

Anthem VideoAnthem Video

Video

Personalized card, server-rendered, w/ a small delay (before)

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

After:

Anthem VideoAnthem Video

Video

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

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

Personalized card test, server-rendered, without delay

Before:

Anthem VideoAnthem Video

Video

Personalized card, server-rendered, without a delay (before)

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

After:

Anthem VideoAnthem Video

Video

Personalized card, server-rendered, without a delay (after)

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