Listing Meta Data and More
A listing can have meta data and extra information.
Important Notes:Meta data can be passed via the meta_items prop, each item is visually separated by a pipe.Meta data can contain links, use the link element to render a link. This will generate a link that is not blocked by the headline link.Extra text can be passed to the more_info prop. It will appear below the meta data. A ellipsis and “read more” text is appended at the end.Warning text can be passed to the warning prop. It will appear below the more info text. A warning icon is appended at the start.
Demo
This is more information. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus … Read More
Warning! This is a warning message.
Twig
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
headline: {
text: 'This listing has meta data and more info',
tag: 'h3',
size: 'large',
link_attributes: {
href: 'https://pega.com'
},
},
meta_items: [
'Posted by <a href="https://collaborate.pega.com" class="e-bolt-text-link e-bolt-text-link--reversed-underline">username</a> on May 21, 2020',
'Last activity: 2 minutes ago',
],
more_info: 'This is the more information. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus',
warning: 'Warning! This is a warning message.',
} only %}