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

More actions

  • Twig
    // 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 %}
        {% set list_items %}
          {% set menu_item_one %}
            {% include '@bolt-elements-text-link/text-link.twig' with {
              content: 'View in Org Chart',
              icon_before: icon_connection_hierarchy,
              attrbiutes: {
                type: 'button'
              }
            } only %}
          {% endset %}
          {% set menu_item_two %}
            {% include '@bolt-elements-text-link/text-link.twig' with {
              content: 'View on PeopleHub',
              icon_before: icon_partners,
              attrbiutes: {
                type: 'button'
              }
            } only %}
          {% endset %}
          {% include '@bolt-elements-menu/menu-item.twig' with {
            content: menu_item_one,
          } only %}
          {% include '@bolt-elements-menu/menu-item.twig' with {
            content: menu_item_two,
          } only %}
        {% endset %}
        {% include '@bolt-elements-menu/menu.twig' with {
          title: 'More actions',
          content: list_items
        } 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/square.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://google.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@mail.com" class="e-bolt-text-link e-bolt-text-link--reversed-underline">mike.mai@mail.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.