Card Replacement

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

Published Last updated: 5.7.0 Change log Github NPM
Twig Usage
// Standard card-replacement
{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'alt text',
      src: '/images/placeholders/landscape-16x9-mountains.jpg',
      loading: 'lazy',

    },
  } only %}
{% endset %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
  media: {
    image: image,
  },
  body: {
    eyebrow: 'This is an eyebrow',
    headline: 'This is a headline',
    paragraph: 'This is a paragraph.',
  },
  actions: [
    {
      text: 'This is a button',
      url: 'https://google.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
    • image

      Refer to the Image Element schema options

    • video

      Pass in Brightcove video markup.

    • content

      Passing free-form content into the card-replacement media will ignore image or video data. Use this if the pre-configured image or video doesn't satisfy your needs.

    • attributes

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

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-list @bolt/components-teaser @bolt/core-v3.x @bolt/elements-button @bolt/global @bolt/lazy-queue wc-context