Teaser Status and Actions A teaser can display certain metadata and additional actions as a list. 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. A like button can be set via the like prop. Additional JavaScript is required for the like button to function. A share popover menu can be set via the share prop. boundary is required on the popover so that the popover would be rendered within the teaser. A download button can be set via the download prop. Demo
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.google.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>