card replacement docs

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.9.1 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/backgrounds/background-light2.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

Card - Basic Example

Image alt text

This is an eyebrow

This is a headline

This is a paragraph.

This is a button

Card - Horizontal

Default horizontal card When creating a horizontal card by setting the horizontal prop to true remember to set height prop to auto. The image you pass for card media should also have its background prop set to true in order to allow the image to be cropped and display properly.
{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      alt: 'Image alt text',
      src: 'path/image.jpg',
    },
  } only %}
{% endset %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
  horizontal: true,
  height: 'auto',
  media: {
    image: image,
  },
  ...
} only %}
Image alt text

This is an eyebrow

This Is a Headline

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

This is a button
The media container will crop the image and video is not supported.
Advanced usage: manually override horizontal media size To finely control the width of the card media based on your use case, set inline style of min-width to the card media. Please use your best judgment when doing this, because absolute units such as px, em, and rem will break responsive layouts. % is the recommended unit to use.
media: {
  image: image,
  attributes: {
    style: 'min-width: 25%',
  }
}
Image alt text

This card's media is 80px wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

This is a button
Image alt text

This card's media is 150px wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

This is a button
Image alt text

This card's media is 25% wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

This is a button
Image alt text

This card's media is 50% wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

This is a button
DIY horizontal card Utilize the custom body content to create a custom card that has horizontal content. A grid is used to create the content with an image on the side.
body: {
  content: customContentWithGrid,
}
Design recommendations: 1) use a square image or video; 2) make the headline and/or the whole card clickable; 3) set spacing prop to small.
Visit the Pega website
Image alt

This card's media is 80px wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

Visit the Pega website
Image alt

This card's media is 150px wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

Visit the Pega website
Image alt

This card's media is 25% wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

Visit the Pega website
Image alt

This card's media is 50% wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

Image alt text

This is an eyebrow

This card's `action` is an internal link

This is a paragraph.

This is an internal button
Image alt text

This is an eyebrow

This card's `action` is an external link

This is a paragraph.

This is an external button
Image alt text

This is an eyebrow

This card's `action` has the `download` icon

This is a paragraph.

This is a button with a different icon
Image alt text

This is an eyebrow

This card's `action` has no icon

This is a paragraph.

This is a button with no icon

Card - With Two Actions

Image alt text

This is an eyebrow

This is a headline

This is a paragraph.

This is a button Verylongunbrokenword

Card - Theme Colors

Inside DARK Parent Container

XLIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

LIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

DARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XDARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

NONE Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XLIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

LIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

DARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XDARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

NONE Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

Inside LIGHT Parent Container

XLIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

LIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

DARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XDARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

NONE Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XLIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

LIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

DARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XDARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

NONE Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

Card - Height Options

Image alt text

This card has auto height.

This is a button
Image alt text

This card has full height. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie.

This is a button
Image alt text

This card also has full height.

This is a button

Card - Video Example

Video Thumbnail with action play

The Video Thumbnail with an inline video (video object passed into the video.content prop) is passed in to the card's media.video prop. The video play button and the card's action button will play/pause the video.

Video Thumbnail without action play

The Video Thumbnail with an inline video (video object passed into the video.content prop) is passed in to the card's media.video prop. The video's play button will play/pause the video.

Go to google.com

Video Thumbnail with whole card clickablity

The Video Thumbnail with an inline video (video object passed into the video.content prop) is passed in to the card's media.video prop. The video and the card's action button will play/pause the video and the whole card clickability will go to a URL path.

Video Thumbnail triggered by whole card clickablity

The Video Thumbnail with an inline video (video object passed into the video.content prop) is passed in to the card's media.video prop. The video will play/pause when the whole card is clicked

Card - Freeform Content

Passing free-form content inside the card-replacement body only

A Rock Climber

Anything can be passed inside the card body container. Woohoo!

Passing free-form content for the entire card

This is a button Verylongunbrokenword

This is an eyebrow

This is a headline

This is a paragraph.

This is a button Verylongunbrokenword

This is an eyebrow

This is a headline

This is a paragraph.


Anything can be passed inside the card container. Woohoo!
This card is completely customized using the content prop
Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3
Image alt text

Eyebrow

Eyebrow

Eyebrow

Image alt text

This is an eyebrow

This is a headline.

This is body text.

This is a button

Card - Border Radius

Image alt text

This card has large border radius

This is a paragraph.

This is a button
Image alt text

This card has large border radius

This is a paragraph.

This is a button

Card - Spacing

Image alt text

This card has small spacing

This is a paragraph.

This is a button
Image alt text

This card has medium spacing

This is a paragraph.

This is a button

Card - Web Component Usage

card-replacement-media. This is an eyebrow This is a headline This is a paragraph. Internal link External link Download Icon No Icon Web Component Usage Bolt Text is a web component, you can simply use <bolt-card-replacement> in the markup to make it render. Its inner content is comprised of <bolt-card-replacement-media>, <bolt-card-replacement-body>, and <bolt-card-replacement-actions>.
<bolt-card-replacement>
  <bolt-card-replacement-media>
    <img src="/images/placeholders/16x9.jpg" alt="card-replacement-media." class="e-bolt-image">
  </bolt-card-replacement-media>
  <bolt-card-replacement-body>
    <bolt-text eyebrow>This is an eyebrow</bolt-text>
    <bolt-text headline>This is a headline</bolt-text>
    <bolt-text>This is a paragraph.</bolt-text>
  </bolt-card-replacement-body>
  <bolt-card-replacement-actions>
    <bolt-card-replacement-action url="!#">Internal link</bolt-card-replacement-action>
    <bolt-card-replacement-action url="https://yahoo.com" external>External link</bolt-card-replacement-action>
    <bolt-card-replacement-action url="https://yahoo.com">Download Icon <span slot="icon"><svg  class="e-bolt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"><g fill="#151619" fill-rule="evenodd" clip-rule="evenodd"><path d="M28.1 28.6H3.9c-.9 0-1.7.8-1.7 1.7S3 32 3.9 32h24.3c.9 0 1.7-.8 1.7-1.7-.1-.9-.8-1.7-1.8-1.7M15 25.5c.2.3.6.5 1 .5s.8-.2 1-.5l9.1-10.9c.3-.4.4-.9.1-1.3-.2-.4-.7-.7-1.2-.7h-4.4V0h-9.1v12.7H6.9c-.5 0-.9.3-1.2.7-.1.2-.1.3-.1.5 0 .3.1.5.3.7z"/></g></svg></span></bolt-card-replacement-action>
    <bolt-card-replacement-action url="https://yahoo.com" icon="none">No Icon</bolt-card-replacement-action>
  </bolt-card-replacement-actions>
</bolt-card-replacement>
Simple Link Usage The simplest way to make the whole card-replacement clickable is by passing a link address to the url prop on the main <bolt-card-replacement> component itself. Also include the url-text prop for accessibility.
<bolt-card-replacement url="https://google.com" url-text="Go to google.com">
  <bolt-card-replacement-media>
    <img src="/images/placeholders/16x9.jpg" alt="card-replacement-media." class="e-bolt-image">
  </bolt-card-replacement-media>
  <bolt-card-replacement-body>This is a card-replacement with an overall link that makes the whole card-replacement clickable.</bolt-card-replacement-body>
</bolt-card-replacement>
Advanced Link Usage Insert a <bolt-card-replacement-link> inside <bolt-card-replacement> and you can pass more than just url. <bolt-card-replacement-link> is similar to <bolt-link>. You can add custom attributes to <bolt-card-replacement-link> and insert a semantic <a> or <button> element inside.
<bolt-card-replacement>
  <bolt-card-replacement-link custom-attribute="foo" html-attribute="bar">
    <a href="https://google.com" target="_blank" rel="noopener">Go to google.com</a>
  </bolt-card-replacement-link>
  <bolt-card-replacement-media>
    <img src="/images/placeholders/16x9.jpg" alt="card-replacement-media." class="e-bolt-image">
  </bolt-card-replacement-media>
  <bolt-card-replacement-body>This is a card-replacement with an overall link that makes the whole card-replacement clickable.</bolt-card-replacement-body>
</bolt-card-replacement>
Nested Links While making the whole card-replacement clickable, you are still able to insert nested links as needed. Any <bolt-link>, <bolt-card-replacement-link>, and <bolt-card-replacement-action> will work as expected.
<bolt-card-replacement url="https://google.com">
  <bolt-card-replacement-media>
    <div class="e-bolt-ratio e-bolt-ratio--wide">
      <video-js data-account="1900410236" data-player="O3FkeBiaDz" data-embed="default" data-video-id="3974147489001" controls class="c-base-video"></video-js>
    </div>
  </bolt-card-replacement-media>
  <bolt-card-replacement-body>
    This is a card-replacement with an overall link that makes the whole card-replacement clickable, while the body can still have <a target="_blank" href="https://boltdesignsystem.com/docs" rel="noopener" class="e-bolt-text-link">text links</a> that would go somewhere else.
  </bolt-card-replacement-body>
  <bolt-card-replacement-actions>
    <bolt-card-replacement-action url="!#">Internal link</bolt-card-replacement-action>
    <bolt-card-replacement-action url="https://yahoo.com" external>External link</bolt-card-replacement-action>
    <bolt-card-replacement-action url="https://yahoo.com">Download Icon <span slot="icon"><svg  class="e-bolt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"><g fill="#151619" fill-rule="evenodd" clip-rule="evenodd"><path d="M28.1 28.6H3.9c-.9 0-1.7.8-1.7 1.7S3 32 3.9 32h24.3c.9 0 1.7-.8 1.7-1.7-.1-.9-.8-1.7-1.8-1.7M15 25.5c.2.3.6.5 1 .5s.8-.2 1-.5l9.1-10.9c.3-.4.4-.9.1-1.3-.2-.4-.7-.7-1.2-.7h-4.4V0h-9.1v12.7H6.9c-.5 0-.9.3-1.2.7-.1.2-.1.3-.1.5 0 .3.1.5.3.7z"/></g></svg></span></bolt-card-replacement-action>
    <bolt-card-replacement-action url="https://yahoo.com" icon="none">No Icon</bolt-card-replacement-action>
  </bolt-card-replacement-actions>
</bolt-card-replacement>