// Set up variables
{% set icon_map %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-map',
  } only %}
{% endset %}
{% set icon_partners %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'partners',
  } only %}
{% endset %}
{% set icon_connection_hierarchy %}
  {% include '@bolt-elements-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 %}