Basic Profile A basic profile summarizes the user information from a particular Pega user. Important Notes: The avatar and cover props expect the Image element or plain HTML image element. The actions prop expects one or many Button elements with icon_only prop. The chips prop expects one or many Chip components. Chip List is not supported. Both the stats and message props accept attributes. If type attribute is passed, it becomse a semantic button. If href attribute is passed, it becomes a semantic link. Otherwise it is just a generic non-interactive element. Never pass both type and href. Optionally, a theme class and a shadow utility class can be added to create a profile card. Demo
First Last
Send message 15 Achievements 3k Contributions
Twig
{% set icon_facebook %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'facebook-solid',
  } only %}
{% endset %}
{% set icon_twitter %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'twitter-solid',
  } 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 avatar %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/placeholders/500x500.jpg',
      width: 500,
      height: 500,
      alt: 'First Last',
      loading: 'eager',
    },
  } only %}
{% endset %}

{% set cover %}
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      src: '/images/content/promos/promo-shape-1.jpg',
      width: 480,
      height: 480,
      alt: '',
      loading: 'eager',
    },
  } 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 %}
    {% include '@bolt-components-menu/menu.twig' with {
      title: 'Share profile',
      items: [
        {
          content: 'Facebook',
          icon_before: icon_facebook,
          url: 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse',
          attributes: {
            target: '_blank',
            rel: 'noopener'
          }
        },
        {
          content: 'Twitter',
          icon_before: icon_twitter,
          url: 'https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!',
          attributes: {
            target: '_blank',
            rel: 'noopener',
          }
        },
        {
          content: 'LinkedIn',
          icon_before: icon_linkedin,
          url: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com',
          attributes: {
            target: '_blank',
            rel: 'noopener',
          }
        },
        {
          content: 'Email',
          icon_before: icon_email,
          url: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com',
          attributes: {
            target: '_blank',
            rel: 'noopener',
          }
        },
      ]
    } 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 %}
    {% include '@bolt-components-menu/menu.twig' with {
      title: 'More options',
      items: [
        {
          content: 'Edit profile',
          icon_before: icon_pencil,
        },
        {
          content: 'Settings',
          icon_before: icon_pega_setting,
        },
      ]
    } 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 {
    text: 'Member since 2017',
    size: 'xsmall',
    border_radius: 'small',
  } only %}
  {% include '@bolt-components-chip/chip.twig' with {
    text: 'Designer',
    color: 'orange',
    size: 'xsmall',
    border_radius: 'small',
  } only %}
  {% include '@bolt-components-chip/chip.twig' with {
    text: 'Available for hire',
    color: 'teal',
    size: 'xsmall',
    border_radius: 'small',
  } only %}
{% endset %}

{% include '@bolt-components-profile/profile.twig' with {
  avatar: avatar,
  cover: cover,
  name: {
    content: '<strong>First Last</strong> (@username)',
    tag: 'h2',
  },
  job_title: 'Lead System Architect',
  location: 'United States',
  actions: actions,
  chips: chips,
  stats: [
    {
      number: '15',
      label: 'Achievements',
      attributes: {
        href: '#!',
      },
    },
    {
      number: '3k',
      label: 'Contributions',
      attributes: {
        href: '#!',
      },
    },
  ],
  message: {
    label: 'Send message',
    attributes: {
      href: '#!',
    },
  },
  attributes: {
    class: [
      't-bolt-white',
      'u-bolt-shadow-level-20',
    ],
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.