Listing Status, Action Menu, and Share Menu A listing can have various statuses, use the proper prop to mark the relevant status. A popover action menu can be added by using the action_menu prop. Important Notes: The solved and locked status labels can be customized. Use the status.number_items prop to render status numbers. The replies and views props are deprecated. It is recommended to pass the Menu component in the action_menu prop. Additionally use the Menu component’s title prop to create a label for the action menu. It is mandatory to pass the Share component with menu display in the share_menu prop. In addition to the action_menu prop and share_menu prop, a custom menu can be built using the custom_menu prop. When building a custom menu, make sure the menu trigger is not too wide that would squish the listing teaser’s content. Demo
Twig
// Set up variables
{% set demo_action_menu %}
  {% include '@bolt-components-menu/menu.twig' with {
    title: 'More actions',
    items: [
      {
        content: 'Reply',
        icon_before: icon_reply,
      },
      {
        content: 'Favorite',
        icon_before: icon_heart,
      },
      {
        content: 'Subscribe',
        icon_before: icon_eye,
      },
    ]
  } only %}
{% endset %}
{% set demo_share_menu %}
  {% include '@bolt-components-share/share.twig' with {
    display: 'menu',
    size: 'small',
    text: 'Share this listing',
    sources: [
      {
        name: 'facebook',
        attributes: {
          href: 'https://www.facebook.com/sharer/sharer.php?u=https://pega.com&src=sdkpreparse'
        }
      },
      {
        name: 'twitter',
        attributes: {
          href: 'https://twitter.com/intent/tweet?url=https://pega.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!'
        }
      },
      {
        name: 'linkedin',
        attributes: {
          href: 'https://www.linkedin.com/shareArticle?url=https://pega.com'
        }
      },
      {
        name: 'email',
        attributes: {
          href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com'
        }
      }
    ],
    copy_to_clipboard: {
      text_to_copy: 'https://pega.com'
    },
  } only %}
{% endset %}
{% set number_items %}
  {% include '@bolt-components-listing-teaser/listing-teaser-status-number.twig' with {
    number: '167',
    label: 'Replies',
  } only %}
  {% include '@bolt-components-listing-teaser/listing-teaser-status-number.twig' with {
    number: '6k',
    label: 'Views',
  } only %}
{% endset %}

// Use the variables in the appropriate props
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
  headline: {
    text: 'This listing has every status and menu possible',
    tag: 'h3',
    size: 'large',
    link_attributes: {
      href: 'https://pega.com'
    },
  },
  meta_items: [
    'Posted 8 hours 15 minutes ago',
    'Last activity: 2 minutes ago',
  ],
  status: {
    solved: true,
    solved_label: 'Completed',
    locked: true,
    locked_label: 'Archived',
    number_items: number_items,
  },
  action_menu: demo_action_menu,
  share_menu: demo_share_menu,
} only %}
HTML
Not available in plain HTML. Please use Twig.