Card

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

Published

Last updated: 2.24.1

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

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`	—	`image` Refer to the Image Component Schema for options `video` Refer to the Video Component Schema for options `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. —
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

  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

This is an eyebrow

This is a headline

This is a paragraph.

This is a button

Default horizontal card

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 is a headline

This is a paragraph.

This is a button

Verylongunbrokenword