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. 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.
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.