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

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

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

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

This is an eyebrow

This is a headline

This is a paragraph.

This is a button

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

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%',
  }
}

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

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

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

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

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

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

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

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 an eyebrow

This card's `action` is an internal link

This is a paragraph.

This is an internal button

This is an eyebrow

This card's `action` is an external link

This is a paragraph.

This is an external button

This is an eyebrow

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

This is a paragraph.

This is a button with a different icon

This is an eyebrow

This card's `action` has no icon

This is a paragraph.

This is a button with no icon

This is an eyebrow

This is a headline

This is a paragraph.

This is a button

Verylongunbrokenword