Listing Teaser Signifier
The signifier is a decorative element that visually represents the content nature of a listing.
Important Notes:
This is a purely decorative element and is hidden from screen readers.
When using an icon as the signifier, a size must be defined. It is recommended to match the size of the headline.
When using an image as the signifier, a width must be defined. It is recommended to use 32px in tandem with large headline, and 38px in tandem with xlarge headline.
Demo
Twig
// Set a signifier variable
{% set demo_icon %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'pega-chat-question',
size: 'large',
color: 'teal',
} only %}
{% endset %}
// Use the variable in the signifier prop
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
signifier: demo_icon,
headline: {
text: 'This listing has an icon signifier',
tag: 'h3',
size: 'large',
link_attributes: {
href: 'https://pega.com'
},
},
meta_items: [
'Posted 8 hours 15 minutes ago',
'Last activity: 2 minutes ago',
],
} only %}
HTML
Not available in plain HTML. Please use Twig.