Listing Teaser Headline
The headline’s size, HTML tag, and link attributes can be customized via props.
Important Notes:
While any size can be used, large and xlarge are recommended.
Based on the structure of a particular page, the proper HTML tag should be defined via the tag prop.
When using the link_attributes prop, an <a> element is wrapped around the headline text. The prop allows you to pass common link attributes such as href and target.
A subheadline can be created with the subheadline prop. The prop accepts anything, even plain text.
An eyebrow can be created with the eyebrow_items prop. The prop accepts an array, each eyebrow item will be separated with a solid seperator.
Demo
Twig
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
eyebrow_items: [
eyebrow_1,
eyebrow_2,
],
headline: {
text: 'This listing has an xlarge headline',
tag: 'h3',
size: 'xlarge',
link_attributes: {
href: 'https://pega.com'
},
},
subheadline: 'This is a subheadline',
meta_items: [
'Posted 8 hours 15 minutes ago',
'Last activity: 2 minutes ago',
],
} only %}
HTML
Not available in plain HTML. Please use Twig.