Basic Teaser A teaser is an interactive block element. Its main purpose is to display relevant content for a resource or external link before user interaction, for which the entire element is clickable.
Important Notes: Due to the complexity of the component markup, Twig template is the recommended usage for Drupal. Both the signifier and headline props are recommended for all teasers, though neither is strictly required. When using the signifier prop, it will automatically crop an <img> to the defined ratio (16:9 for vertical and responsive layout, 1:1 for horizontal layout). When using the Image element or the Video Thumbnail component as the signifier, please be sure that the source image file has the appropriate ratio, otherwise there will be undesired white space or cropping. The headline prop and its children props are required for use. To set an action for the teaser, set an href (for links) or type and proper attributes (for buttons) with the headline.link_attributes prop.
Demo
Twig
{% set image %}
  // <img> or <bolt-image> goes here
{% endset %}
{% include '@bolt-components-teaser/teaser.twig' with {
  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.