Teaser Card Variant The variant card prop can turn a teaser into a teaser card.
Important Notes: When the variant prop is set to card it's possible to apply spacing around the teaser and rounding the teaser's corners. Reference the schema for spacing and border_radius props. The card variant teaser, unlike the transparent teaser, has default background color set to white. It doesn't inherit the theme color from the wrapping element. The default white color can be changed using a theme class on the teaser component. Scroll the page to see examples.
Demo
Alt text.
This card has the border_radius set to small. The prop spacing is set to small. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Alt text.
This card has the prop border_radius set to small. The prop spacing is set to small. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Alt text.
This card has the prop border_radius set to small. The prop spacing is set to small. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Alt text.
This card has the prop border_radius set to large. The prop spacing is set to medium. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Alt text.
This card has the prop border_radius set to large. The prop spacing is set to medium. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Alt text.
This card has the prop border_radius set to large. The prop spacing is set to medium. Lorem ipsum dolor sit amet consectetur adipisicing elit.

The navy color theme is set on the element which wraps the card variant teaser.

The black color theme is set on the element which wraps the card variant teaser.

A navy gradient is set on the element which wraps the card variant teaser.

A custom (teal-wine) gradient is set on the element which wraps the card variant teaser.

Twig
{% include '@bolt-components-teaser/teaser.twig' with {
  layout: 'horizontal',
  variant: 'card',
  border_radius: 'large',
  spacing: 'medium',
  signifier: image,
  headline: {
    text: 'This is the teaser headline',
    link_attributes: {
      href: 'https://www.google.com',
      target: '_blank',
      rel: 'noopener'
    }
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.