Bolt Design System

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

Card

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