2.11.2

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

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