Toni Kukoc (@thepinkpanther)

{% set icon_facebook %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'facebook-solid',
  } only %}
{% endset %}
{% set icon_X %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'x',
  } only %}
{% endset %}
{% set icon_linkedin %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'linkedin-solid',
  } only %}
{% endset %}
{% set icon_email %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'email',
  } only %}
{% endset %}
{% set icon_more %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'more',
  } only %}
{% endset %}
{% set icon_pencil %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pencil',
  } only %}
{% endset %}
{% set icon_share %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'share',
  } only %}
{% endset %}
{% set icon_pega_setting %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-setting',
  } only %}
{% endset %}

{% set actions %}
  {% set popover_trigger %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Share profile',
      icon_only: icon_share,
      hierarchy: 'tertiary',
      border_radius: 'full',
      size: 'xsmall',
      attributes: {
        type: 'button',
      }
    } only %}
  {% endset %}
  {% set popover_menu %}
    {% set list_items %}
      {% set facebook %}
        {% include '@bolt-elements-text-link/text-link.twig' with {
          content: 'Facebook',
          icon_before: icon_facebook,
          attributes: {
            href: 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse',
            target: '_blank',
            rel: 'noopener'
          }
        } only %}
      {% endset %}
      {% set x %}
        {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'X',
            icon_before: icon_X,
            attributes: {
              href: 'https://x.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!',
              target: '_blank',
              rel: 'noopener'
            }
        } only %}
      {% endset %}
      {% set LinkedIn %}
        {% include '@bolt-elements-text-link/text-link.twig' with {
          content: 'LinkedIn',
          icon_before: icon_linkedin,
          attributes: {
            href: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com',
            target: '_blank',
            rel: 'noopener'
          }
        } only %}
      {% endset %}
      {% set email %}
        {% include '@bolt-elements-text-link/text-link.twig' with {
          content: 'Email',
          icon_before: icon_email,
          attributes: {
            href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com',
            target: '_blank',
            rel: 'noopener'
          }
        } only %}
      {% endset %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: facebook,
      } only %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: x,
      } only %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: LinkedIn,
      } only %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: email,
      } only %}
    {% endset %}

    {% include '@bolt-elements-menu/menu.twig' with {
      spacing: 'medium',
      title: 'Share profile',
      content: list_items,
    } only %}
  {% endset %}
  {% include '@bolt-components-popover/popover.twig' with {
    trigger: popover_trigger,
    content: popover_menu,
    spacing: 'none',
    placement: 'bottom-end',
    trigger_event: 'hover',
  } only %}

  {% set popover_trigger %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'More options',
      icon_only: icon_more,
      hierarchy: 'tertiary',
      border_radius: 'full',
      size: 'xsmall',
      attributes: {
        type: 'button',
      }
    } only %}
  {% endset %}
  {% set popover_menu %}
    {% set list_items %}
      {% set edit %}
        {% include '@bolt-elements-text-link/text-link.twig' with {
          content: 'Edit profile',
          icon_before: icon_pencil,
          attributes: {
            type: 'button'
          }
        } only %}
      {% endset %}
      {% set settings %}
        {% include '@bolt-elements-text-link/text-link.twig' with {
          content: 'Settings',
          icon_before: icon_pega_setting,
          attributes: {
            type: 'button'
          }
        } only %}
      {% endset %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: edit,
      } only %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: settings,
      } only %}
    {% endset %}
    {% include '@bolt-elements-menu/menu.twig' with {
      spacing: 'medium',
      title: 'More options',
      content: list_items
    } only %}
  {% endset %}
  {% include '@bolt-components-popover/popover.twig' with {
    trigger: popover_trigger,
    content: popover_menu,
    spacing: 'none',
    placement: 'bottom-end',
    trigger_event: 'hover',
  } only %}
{% endset %}

{% set chips %}
  {% include '@bolt-components-chip/chip.twig' with {
    content: 'Member since 2017',
    border_radius: 'small',
  } only %}
  {% include '@bolt-components-chip/chip.twig' with {
    content: 'Developer',
    border_radius: 'small',
    attributes: {
      class: 't-bolt-orange',
    }
  } only %}
  {% include '@bolt-components-chip/chip.twig' with {
    content: 'Available for hire',
    border_radius: 'small',
    attributes: {
      class: 't-bolt-teal',
    }
  } only %}
{% endset %}

{% include '@bolt-components-profile/profile.twig' with {
  name: {
    content: '<strong>Toni Kukoc</strong> (@thepinkpanther)',
    tag: 'h1',
  },
  job_title: 'Lead System Architect',
  location: 'Croatia',
  actions: actions,
  chips: chips,
  stats: [
    {
      number: '7',
      label: 'Achievements',
      attributes: {
        type: 'button',
      },
    },
    {
      number: '7k',
      label: 'Contributions',
      attributes: {
        type: 'button',
      },
    },
  ],
  message: {
    label: 'Send message',
    attributes: {
      href: '#!',
    },
  },
  full_bleed: true,
  attributes: {
    class: 't-bolt-gray-xlight',
  },
} only %}