2.23.0

Card

Sneak peak of the upcoming v3.0 Card component, (temporarily renamed as 'Card Replacement' on Bolt v2.x to avoid naming collisions).

Install via NPM
npm install @bolt/components-card-replacement

Description

Cards are shadowed containers that group together relevant and actionable information.

Best Practices

Overview Usage Schema Edit this page
  // 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 %}

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
    • image
      • @bolt-components-image/image.schema.yml > Object details
        • attributes

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

          Type: object

        • src

          Source url for image.

          Type: string

        • alt

          Alt tag for image.

          Type: string

        • lazyload

          Lazyload can boost performance by loading images on demand, instead of on initial page load.

          Type: boolean

          • true or false
        • no_lazy

          Override the default lazyload behavior. Used only on the web component, where the presence of a boolean property always equates to true.

          Type: boolean

          • true or false
        • placeholder_color

          A valid CSS background color property shown while image loads.

          Type: string

        • placeholder_image

          Image path or image data shown while image loads.

          Type: string

        • srcset

          A comma seperated string of image urls and image widths, used for optimizing image loading performance.

          Type: string

        • sizes

          A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of a media condition (omitted for the last item), and a source size value. Learn more.

          Type: string

        • useAspectRatio

          Use the ratio prop instead.

          Type: boolean

          • true or false
        • ratio

          Set the aspect ratio for the image via slash-separated width and height values, e.g. 4/3. Currently required for aspect ratio to be applied properly. Set to "none" to opt out of aspect ratio.

          Type: string, boolean

        • max_width

          Set the max-width of the image as a valid CSS value, e.g. "300px" or "50%".

          Type: string

        • width

          Override the default width of the image. If no height is provided, aspect ratio will be maintained.

          Type:

        • height

          Override the default height of the image. If no width is provided, aspect ratio will be maintained.

          Type:

        • cover

          Set an image to fill its container.

          Type: boolean

          • true or false
        • imageAttributes

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

          Type: object

        • valign

          Allows the image's vertical alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (top | center | bottom) or via specific pixel or percent offset (ex. 30%).

          Type: string

        • align

          Allows the image's horizontal alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (left | center | right) or via specific pixel or percent offset (ex. 30%).

          Type: string

    • video
      • @bolt-components-video/video.schema.yml > Object details
        • attributes

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

          Type: object

        • videoId

          Brightcove ID for this video.

          Type: string, number

        • playerId

          Brightcover Player ID.

          Type: string

        • accountID

          ID of the Brightcove account that owns the video.

          Type: string, number

        • videoUuid

          A unique identifying string, randomly generated if not provided.

          Type: string

        • share_description

          A custom title to use in the share overlay

          Type: string

        • ratio

          Maintain video ratio.

          Type: boolean

        • collapsed

          Should the video be collapsed on load.

          Type: boolean

        • showMeta

          Should the video show meta data.

          Type: boolean

        • showMetaTitle

          Should the video show meta title.

          Type: boolean

        • controls

          Should the video controls be available.

          Type: boolean

        • autoplay

          Should the video auto-play on load.

          Type: boolean

        • loop

          Should the video loop.

          Type: boolean

        • on_init

          The on_init config allows for an external Javascript function inlined on the page to add any 3rd party scripts or video plugins to a <bolt-video> player instance when initializing. Please see the new recommended enabled_plugins and disabled_plugins options below.

          Type: string

        • default_plugins

          An array of the default <bolt-video> player plugins that are globally enabled by default.

          Type: array

          • playback
        • available_plugins

          The built-in <bolt-video> player plugins that are availble to be used in any player instance without requiring the use of any extra Javascript.

          Type: array

          • playback, social, email, cue
        • enabled_plugins

          Space-separated list of built-in <bolt-video> plugins for Brightcove to enable. Current include social, email, playback, and cue. For example: <bolt-video enabled-plugins="cue social email playback">.

          Type: string

        • disabled_plugins

          Space-separated list of any built-in <bolt-video> plugins for Brightcove to disable. Used to opt-out of any video plugins that are enabled by default (ex. the playback plugin). For example: <bolt-video disabled-plugins="playback">.

          Type: string

        • isBackgroundVideo

          Background video feature will be removed with Bolt v3.0

          Type:

    • 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
Open Accordion Close Accordion
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
Debug Panel