Bolt Design System

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. Note: the values xlight, light, dark, xdark, xxdark are deprecated.	`string`	`none`	`none`, `white`, `black`, `gray-xlight`, `navy-dark`, `navy`, `navy-light`, `teal`, `yellow`, `orange`, `pink`, `wine`, `berry`, `violet`
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

@bolt/elements-button

@bolt/global

@bolt/lazy-queue

wc-context

Card Replacement

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