Teaser With Lottie Player A teaser can have a signifier that plays a Lottie animation when hovered or focused and pauses when unhovered or unfocused.
Important Notes: It's recommended to use the card variant when the signifier is a Lottie animation. The signifier may be cropped, potentially cutting off the Lottie animation. If the illustration appears cropped, apply the no_aspect_ratio prop to ensure it displays correctly. Alternatively, Lottie files can be designed with a 16:9 ratio for vertical teasers and a 1:1 ratio for horizontal teasers to enhance the user experience.
Demo

This is vertical teaser

Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet optio provident iure vel atque ullam veniam repudiandae fuga illum voluptate quis iste autem ab illo, perspiciatis cupiditate assumenda facilis aliquid.

This is responsive teaser

Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet optio provident iure vel atque ullam veniam repudiandae fuga illum voluptate quis iste autem ab illo, perspiciatis cupiditate assumenda facilis aliquid.

This is horizontal teaser

Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet optio provident iure vel atque ullam veniam.
Twig
{% set lottie_player %}
  <lottie-player src="/path/to/the/lottie-file.json"></lottie-player>
{% endset %}
{% include '@bolt-components-teaser/teaser.twig' with {
  variant: 'card',
  signifier: lottie_player,
  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.