Card

A content container with drop shadows (temporarily renamed as 'Card Replacement' on Bolt v2.x to avoid naming collisions)

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage 
  // Standard card-replacement
{% include "@bolt-components-card-replacement/card-replacement.twig" with {
  media: {
    image: {
      src: "/images/placeholders/landscape-16x9-mountains.jpg",
      alt: "Image alt.",
    },
  },
  body: {
    eyebrow: "This is an eyebrow",
    headline: "This is a headline",
    paragraph: "This is a paragraph.",
  },
  actions: [
    {
      text: "This is a button",
      url: "https://pega.com",
    },
  ],
} only %}

// Custom section content
{% include "@bolt-components-card-replacement/card-replacement.twig" with {
  media: {
    content: "Pass custom content to the card-replacement media.",
  },
  body: {
    content: "Pass custom content to the card-replacement body.",
  },
} only %}

// Custom overall content
{% include "@bolt-components-card-replacement/card-replacement.twig" with {
  content: "Pass completely custom content to the card-replacement, without the styles of the card-replacement body.",
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Card
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

 object —
  • —
tag

HTML tag that contains the card-replacement content.

 string article
  • div , article , figure
horizontal

Displays the card media + body horizontally.

 boolean —
  • —
height

Controls the height of the card-replacement to auto fit to content or the full height of the column in a grid.

 string full
  • auto or full
border_radius

Controls the border-radius of the card-replacement.

 string small
  • small or large
spacing

Controls the spacing of the card-replacement.

 string medium
  • small or medium
theme

Controls the theme of the individual card-replacement.

 string none
  • xlight , light , dark , xdark , none
link

Providing a link will make the whole card-replacement clickable.

 object —
    • url

      Address for the link.

      • —
    • text

      Visually hidden text for link, included for accessibility.

      • —
    • attributes

      A Drupal-style attributes object with extra attributes to append to this component.

      • —
media

Media section of the card-replacement, accepts either image and video, or custom content.

 object —
body

Body section of the card-replacement, accepts pre-configured eyebrow, headline, and paragraph or custom content.

 object —
    • eyebrow

      Regular eyebrow.

      • —
    • headline

      Headline pre-defined to size large.

      • —
    • paragraph

      Regular paragraph of text.

      • —
    • content

      Passing free-form content into the card-replacement body will ignore eyebrow, headline, and paragraph data. Use this if the pre-configured eyebrow, headline, and paragraph don't satisfy your needs.

      • —
    • attributes

      A Drupal-style attributes object with extra attributes to append to this component.

      • —
actions

Actions section of the card-replacement, accepts buttons.

 array —
  • See below
content

Content will override media, body, and actions props. Use this to build a completely cuztomized card-replacement.

 string , array , object —
  • —
Card: items
Prop Name Description Type Default Value Option(s)
text

Action link text.

 string —
  • —
url

Action link url.

 string —
  • —
external

Indicate if this is an external link. If true, the link will open in a new tab.

 boolean —
  • —
icon

Allows user to specify the icon showed on the action button. If no icon is provided in this prop, the default behavior will take place and the icon shown will depend on if the URL is internal or external. Alternatively, providing "none" as the value can show no icon.

 string —
  • —
attributes

A Drupal-style attributes object with extra attributes to append to this component. Attributes are added to the bolt-button element inside the action item.

 object —
  • —
Advanced Schema Options
raised

Manually switch on / off the raised (shadow + animation effect) treament. By default this config option is applied if the card-replacement contains a bolt-card-replacement-link OR includes the url prop.

 boolean —
  • —
Install Install 
  npm install @bolt/components-card-replacement
Dependencies @bolt/components-background @bolt/components-button @bolt/components-list @bolt/components-teaser @bolt/components-video @bolt/core-v3.x @bolt/lazy-queue wc-context