Profile

UI element that summarizes a particular user.

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

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_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&amp;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

Full Bleed Profile

Profile width can expand the full viewport.

Demo

Toni Kukoc (@thepinkpanther)

Member since 2017

Designer

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_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&amp;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 %}

HTML

Profile with Avatar Edit Button

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

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

profile

profile docs

Profile

UI element that summarizes a particular user.

profile

Share profile

More options

First Last (@username)

profile full bleed

Share profile

More options

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

Share profile

More options

First Last (@username)

profile full bleed Show Code Hide Code

Share profile

More options

Toni Kukoc (@thepinkpanther)

profile avatar edit button Show Code Hide Code

First Last (@username)

profile docs

profile

profile full bleed

profile avatar edit button