Teaser Status and Actions
The status prop can be used to display status information about a resource such as locked and view count. Like, share and download buttons can be generated via the actions prop.
Important Notes:View count can be set via the status.views prop. It can be numbers or string (eg. 28k).Locked status can be set via the status.locked prop. If this is set, a lock icon will appear with the signifier.Pass a like button into the like prop. Example code snippet is shown below.Pass a share popover menu into the share prop. Boundary is required on the popover. Example code snippet is shown below.Pass a download link into the download prop. Example code snippet is shown below.
Demo
Aliqua voluptate amet do laborum culpa tempor consectetur culpa consectetur ea. Ea officia quis do enim.
Twig
// Set up the like and share buttons
{% set like %}
{% set icon_heart %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'heart',
} only %}
{% endset %}
{% include '@bolt-elements-text-link/text-link.twig' with {
content: 'Like',
icon_before: icon_heart,
reversed_underline: true,
attributes: {
type: 'button',
class: 'js-bolt-like-button', // JS target for handling the like function.
},
} only %}
{% endset %}
{% set share %}
{% set share_menu %}
{% include '@bolt-components-share/share.twig' with {
display: 'menu',
text: 'Share this content',
sources: [
...
],
} only %}
{% endset %}
{% set share_popover_trigger %}
{% set icon_share %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'share',
} only %}
{% endset %}
{% include '@bolt-elements-text-link/text-link.twig' with {
content: 'Share',
icon_before: icon_share,
reversed_underline: true,
attributes: {
type: 'button'
},
} only %}
{% endset %}
{% include '@bolt-components-popover/popover.twig' with {
trigger: share_popover_trigger,
content: share_menu,
spacing: 'none',
boundary: '.js-bolt-target-teaser', // JS target for containing the popover within the teaser.
} only %}
{% endset %}
{% set download %}
{% set icon_download %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'download',
} only %}
{% endset %}
{% set tooltip_trigger %}
{% include '@bolt-elements-text-link/text-link.twig' with {
content: 'Download slides',
icon_before: icon_download,
reversed_underline: true,
attributes: {
href: 'https://www.pega.com/',
},
} only %}
{% endset %}
{% include "@bolt-components-tooltip/tooltip.twig" with {
trigger: tooltip_trigger,
content: "PDF, 3 pages, 2.3mb",
} only %}
{% endset %}
// Set up the component
{% include '@bolt-components-teaser/teaser.twig' with {
like: like,
share: share,
download: download,
status: {
views: '28k',
locked: true,
},
attributes: {
class: 'js-bolt-target-teaser',
},
...
} only %}
HTML
Not available in plain HTML. Please use Twig.
JavaScript
<script>
// Example Like Button JS
var likeButtons = document.querySelectorAll('.js-bolt-like-button');
likeButtons.forEach(function(el) {
el.addEventListener('click', function (event) {
var likeIcon = this.querySelector('bolt-icon');
if (likeIcon.getAttribute('name') === 'heart-open') {
likeIcon.setAttribute('name', 'heart');
likeIcon.setAttribute('color', 'pink');
} else {
likeIcon.setAttribute('name', 'heart-open');
likeIcon.removeAttribute('color');
}
});
})
</script>
