// Set up variables
{% set demo_action_menu %}
{% set list_items %}
{% set reply %}
{% include '@bolt-elements-text-link/text-link.twig' with {
content: 'Reply',
icon_before: icon_reply,
attributes: {
type: 'button'
}
} only %}
{% endset %}
{% set reply %}
{% include '@bolt-elements-text-link/text-link.twig' with {
content: 'Reply',
icon_before: icon_reply,
attributes: {
type: 'button'
}
} only %}
{% endset %}
{% include '@bolt-elements-menu/menu-item.twig' with {
content: reply,
} only %}
{% set favorite %}
{% include '@bolt-elements-text-link/text-link.twig' with {
content: 'Favorite',
icon_before: icon_heart,
attributes: {
type: 'button'
}
} only %}
{% endset %}
{% include '@bolt-elements-menu/menu-item.twig' with {
content: favorite,
} only %}
{% set subscribe %}
{% include '@bolt-elements-text-link/text-link.twig' with {
content: 'Subscribe',
icon_before: icon_eye,
attributes: {
type: 'button'
}
} only %}
{% endset %}
{% include '@bolt-elements-menu/menu-item.twig' with {
content: subscribe,
} only %}
{% endset %}
{% include '@bolt-elements-menu/menu.twig' with {
title: 'More actions',
content: list_items
} 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://google.com&src=sdkpreparse'
}
},
{
name: 'x',
attributes: {
href: 'https://x.com/intent/tweet?url=https://google.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!'
}
},
{
name: 'linkedin',
attributes: {
href: 'https://www.linkedin.com/shareArticle?url=https://google.com'
}
},
{
name: 'email',
attributes: {
href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com'
}
}
],
copy_to_clipboard: {
text_to_copy: 'https://google.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://google.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 %}
