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 status label can be customized. The locked status label can be customized. The replies status label can be customized. 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 action menu and share menu 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 %} // Use the variables in action_menu and share_menu 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', replies: '33', replies_label: 'Replies', views: '6k', }, action_menu: demo_action_menu, share_menu: demo_share_menu, } only %}
HTML
Not available in plain HTML. Please use Twig.