signifier
and headline
props are recommended for all teasers, though neither is strictly required.signifier
prop, it will automatically crop an <img>
to the defined ratio (16:9 for vertical and responsive layout, 1:1 for horizontal layout).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 %}