Teaser Text Options
The teaser allows for a few different text options, including eyebrow_text, headline, subheadline, and description.Important Notes:When setting the headline and subheadline please be sure to set the proper HTML tag to ensure SEO and accessibility best practices.The description has the show_on_hover boolean prop. When it is set to true, the description appears as an overlay above the signifier.The traditional eyebrow/headline/subheadline lockup is best used in responsive layout.
Demo
This is the description. Aliqua voluptate amet do laborum culpa tempor consectetur culpa consectetur ea. Ea officia quis do enim.
This is the description. Aliqua voluptate amet do laborum culpa tempor consectetur culpa consectetur ea. Ea officia quis do enim.
Twig
{% include '@bolt-components-teaser/teaser.twig' with {
eyebrow_text: 'This is the eyebrow',
headline: {
text: 'This is the headline',
tag: 'h2',
size: 'xxlarge',
link_attributes: {
href: 'https://www.pega.com',
}
},
subheadline: {
text: 'This is the subheadline',
tag: 'h3',
size: 'xlarge',
},
description: {
content: 'This is the description. Aliqua voluptate amet do laborum culpa tempor consectetur culpa consectetur ea. Ea officia quis do enim. Duis dolore labore cillum excepteur aute veniam dolore consectetur est sint exercitation sit. Dolor eiusmod officia laborum tempor. Enim eiusmod Lorem laboris aliqua dolore.',
show_on_hover: true,
},
...
} only %}
