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.