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

Share profile

  • Facebook
  • X
  • LinkedIn
  • Email
  • More options

  • Twig
    {% 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 avatar %}
      {% include '@bolt-elements-image/image.twig' with {
        attributes: {
          src: '/images/placeholders/square.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/profiles/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 %}
        {% 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',
        size: 'xsmall',
        border_radius: 'small',
      } only %}
      {% include '@bolt-components-chip/chip.twig' with {
        content: 'Designer',
        size: 'xsmall',
        border_radius: 'small',
        attributes: {
          class: 't-bolt-orange',
        }
      } only %}
      {% include '@bolt-components-chip/chip.twig' with {
        content: 'Available for hire',
        size: 'xsmall',
        border_radius: 'small',
        attributes: {
          class: 't-bolt-teal',
        }
      } 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.