signifier and headline props are required for a basic teaser.signifier prop, it will automatically crop an <img> to the defined ratio (16:9 for vertical and responsive layout, 1:1 for horizontal layout).bolt-image as the signifier, please be sure that the source image file has the appropriate ratio, otherwise there will be undesired white space.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.
{% 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 %}