Profile

UI element that summarizes a particular user.

Published

Last updated: 5.8.0

Github

NPM

Twig Usage

{% include '@bolt-components-profile/profile.twig' with {
  name: {
    content: '<strong>First Last</strong> (@username)',
    tag: 'h2',
  },
  job_title: 'Lead System Architect',
  location: 'United States',
} only %}

Schema

Profile (profile.twig)

Profile

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to parent container.	`object`	—	—
avatar	Render a custom avatar image.	`any`	—	—
avatar_edit_button	Content of the edit button. profile-avatar-edit-button template is expected here.	`any`	—	—
cover	Render a custom cover image.	`any`	—	—
name	Render a name and/or username for the user.	`object`	—	`content` Set the text content. — `tag` Set the semantic heading level. `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
job_title	Render job title of the user.	`any`	—	—
location	Render location of the user.	`any`	—	—
actions	Render user actions. Icon-only button elements are expected here.	`any`	—	—
chips	Render chips based on user info. Chip components (no Chip List) are expected here.	`any`	—	—
message	Render a message button.	`object`	—	`attributes` A Drupal attributes object. Applies extra HTML attributes to the message container. — `label` Text label of the message button. —
stats	Render stats with text labels.	`array`	—	See below
full_bleed	Set the profile to expand the full viewport. Use this prop for building a profile header for a particular page.	`boolean`	`false`	—

Profile: items

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the stat container.	`object`	—	—
label	Text label of the stat.	`any`	—	—
number	Number of the stat.	`any`	—	—

Profile Avatar Edit Button (profile-avatar-edit-button.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent container.	`object`	—	—
content	Set the button text.	`any`	—	—

Install

npm install @bolt/components-profile

Dependencies

@bolt/core-v3.x

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 (@username)

Member since 2017

Designer

Available for hire

Lead System Architect
United States

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/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 %}
    {% 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&amp;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.

Full Bleed Profile

Profile width can expand the full viewport.

Important Notes:

Use the full_bleed prop for building a profile header for a particular page.

While building a profile page, it is recommened to set the semantic heading level of the name to be h1. Use the name.tag prop to set it. See a full page mockup of User Profile.

Demo

Toni Kukoc (@thepinkpanther)

Member since 2017

Developer

Available for hire

Lead System Architect
Croatia

Send message

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 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&amp;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',
    border_radius: 'small',
  } only %}
  {% include '@bolt-components-chip/chip.twig' with {
    text: 'Developer',
    color: 'orange',
    border_radius: 'small',
  } only %}
  {% include '@bolt-components-chip/chip.twig' with {
    text: 'Available for hire',
    color: 'teal',
    border_radius: 'small',
  } 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 %}

HTML

Not available in plain HTML. Please use Twig.

Profile with Avatar Edit Button

The avatar can display an edit button on hover and focus.

Important Notes:

Depending on if the <a> element or the <button> element is being used, the proper HTML attributes should be passed in via the edit button's attributes prop. See Button element docs for more info.

Demo

First Last (@username)

Lead System Architect
United States

Twig

{% set edit_button %}
  {% include '@bolt-components-profile/profile-avatar-edit-button.twig' with {
    content: 'Edit Text'|t,
    attributes: {
      type: 'button',
      class: 'js-button-edit',
      'data-foo': 'bar'
    },
  } only %}
{% endset %}
{% include '@bolt-components-profile/profile.twig' with {
  name: {
    content: '<strong>First Last</strong> (@username)',
    tag: 'h2',
  },
  job_title: 'Lead System Architect',
  location: 'United States',
  avatar_edit_button: edit_button,
} only %}

HTML

Not available in plain HTML. Please use Twig.

profile

profile docs

Profile

UI element that summarizes a particular user.

profile

First Last (@username)

profile full bleed

Toni Kukoc (@thepinkpanther)

profile avatar edit button

First Last (@username)

profile

profile docs Show Code Hide Code

Profile

UI element that summarizes a particular user.

profile Show Code Hide Code

First Last (@username)

profile full bleed Show Code Hide Code

Toni Kukoc (@thepinkpanther)

profile avatar edit button Show Code Hide Code

First Last (@username)

profile docs

profile

profile full bleed

profile avatar edit button