card replacement docs

Card

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

Published Last updated: 2.28.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.
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
borderRadius

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.

actions

Actions section of the card-replacement, accepts buttons.

array
    • text
    • url
    • external
    • attributes

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

content

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

string , array , 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

Card - Basic Example

Image alt. Image alt.

This is an eyebrow

This is a headline

This is a paragraph.

This is a button

Card - Horizontal

Default horizontal card Image alt. Image alt.

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. 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.

This is a button
Image alt. 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.

This is a button
Image alt. 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.

This is a button
Image alt. 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.

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 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 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 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 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. Image alt.

This is an eyebrow

This card's `action` is an internal link

This is a paragraph.

This is an internal button
Image alt. Image alt.

This is an eyebrow

This card's `action` is an external link

This is a paragraph.

This is an external button

Card - With Two Actions

Image alt. Image alt.

This is an eyebrow

This is a headline

This is a paragraph.

This is a button Verylongunbrokenword

Card - Theme Colors

Inside XDARK 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 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

Inside XLIGHT 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. Image alt.

This card has auto height.

This is a button
Image alt. Image alt.

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. Image alt.

This card also has full height.

This is a button

Card - Video Example

Video

Video Meta Title Goes Here.

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

With link and video

This card has a link, which makes the whole card-replacement clickable, and you can make it play/pause the video. Action button is optional in this case.

Card - Freeform Content

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

A Rock Climber 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. Image alt.

Card - With Teaser Content

Image alt. Image alt.

This is an eyebrow

This is a headline.

This is body text.

This is a button

Card - Border Radius

Image alt. Image alt.

This card has large border radius

This is a paragraph.

This is a button
Image alt. Image alt.

This card has large border radius

This is a paragraph.

This is a button

Card - Spacing

Image alt. Image alt.

This card has small spacing

This is a paragraph.

This is a button
Image alt. Image alt.

This card has medium spacing

This is a paragraph.

This is a button

Card - Web Component Usage

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>.
This is an eyebrow This is a headline This is a paragraph. Internal link External link
<bolt-card-replacement> <bolt-card-replacement-media> <bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" alt="card-replacement media."></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="https://pega.com"> Internal link </bolt-card-replacement-action> <bolt-card-replacement-action url="https://yahoo.com" external> External link </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.
This is a card-replacement with an overall link that makes the whole card-replacement clickable.
<bolt-card-replacement url="https://google.com" url-text="Go to google.com"> <bolt-card-replacement-media> <bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" alt="card-replacement media."></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.
Go to google.com This is a card-replacement with an overall link that makes the whole card-replacement clickable.
<bolt-card-replacement> <bolt-card-replacement-link custom-attribute="foo" html-attribute="bar"> <a href="http://google.com" target="_blank">Go to google.com</a> </bolt-card-replacement-link> <bolt-card-replacement-media> <bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" alt="card-replacement media."></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.
This is a card-replacement with an overall link that makes the whole card-replacement clickable, while the body can still have text links that would go somewhere else. Internal link External link
<bolt-card-replacement url="https://google.com"> <bolt-card-replacement-media> <bolt-ratio aspect-ratio-height="9" aspect-ratio-width="16"> <bolt-video data-setup='{"techOrder": ["Html5"], "resizeManager": false}' video-id="3861325118001" account-id="1900410236" show-meta show-meta-title player-id="r1CAdLzTW" controls></bolt-video> </bolt-ratio> </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 <bolt-link target="_blank" url="https://boltdesignsystem.com/docs">text links</bolt-link> that would go somewhere else. </bolt-card-replacement-body> <bolt-card-replacement-actions> <bolt-card-replacement-action url="https://pega.com"> Internal link </bolt-card-replacement-action> <bolt-card-replacement-action url="https://yahoo.com" external> External link </bolt-card-replacement-action> </bolt-card-replacement-actions> </bolt-card-replacement>