Use Case: Contact List A list of contact card teasers, each displays a quick summary of a particular person. Important Notes: The custom_menu prop is being used to render a custom popover menu (the more button). The subheadline prop is being used to render the job title. The description prop is being used to render the recent-articles popover. Demo

Mike Mai

Lead Web Architect, Pega Digital IT
Twig
// Set up variables {% set icon_map %} {% include '@bolt-components-icon/icon.twig' with { name: 'pega-map', } only %} {% endset %} {% set icon_partners %} {% include '@bolt-components-icon/icon.twig' with { name: 'partners', } only %} {% endset %} {% set icon_connection_hierarchy %} {% include '@bolt-components-icon/icon.twig' with { name: 'pega-connection-hierarchy', } only %} {% endset %} {% set more_button %} {% set popover_content %} {% include '@bolt-components-menu/menu.twig' with { title: 'More actions', items: [ { content: 'View in Org Chart', icon_before: icon_connection_hierarchy, }, { content: 'View on PeopleHub', icon_before: icon_partners, }, ] } only %} {% endset %} {% set popover_trigger %} {% include '@bolt-elements-button/button.twig' with { content: 'More', size: 'xsmall', hierarchy: 'tertiary', attributes: { type: 'button', } } only %} {% endset %} {% include '@bolt-components-popover/popover.twig' with { trigger: popover_trigger, content: popover_content, spacing: 'none', placement: 'bottom-end', } only %} {% endset %} {% set signifier %} <img src="/images/placeholders/500x500.jpg" alt="" width=56 height=56 class="u-bolt-border-radius-full"> {% endset %} // Pass variables to the component {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { gutter: 'small', signifier: signifier, layout: 'responsive', headline: { text: 'Firstname Lastname', tag: 'h3', size: 'xlarge', link_attributes: { href: 'https://pega.com' }, }, subheadline: '<p><strong>Lead Web Architect</strong>, Pega Digital IT</p>', meta_items: [ 'Phone: <a href="tel:+1(123)-456-7890" class="e-bolt-text-link e-bolt-text-link--reversed-underline">+1(123)-456-7890</a>', 'Email: <a href="mailto:evgeny.vyatkin@pega.com" class="e-bolt-text-link e-bolt-text-link--reversed-underline">mike.mai@pega.com</a>', 'Location: Cambridge HQ', 'Pega ID: FLAST', 'Hired date: May 4, 2018', ], variant: 'card', inset_spacing: 'small', custom_menu: more_button, } only %}
HTML
Not available in plain HTML. Please use Twig.