profile docs

Profile

UI element that summarizes a particular user.

Published Last updated: 4.8.0 Change log 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
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
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
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
Install Install
npm install @bolt/components-profile
Dependencies @bolt/core-v3.x

profile

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
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&amp;src=sdkpreparse',
          attributes: {
            target: '_blank',
          }
        },
        {
          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',
          }
        },
        {
          content: 'LinkedIn',
          icon_before: icon_linkedin,
          url: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com',
          attributes: {
            target: '_blank',
          }
        },
        {
          content: 'Email',
          icon_before: icon_email,
          url: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com',
          attributes: {
            target: '_blank',
          }
        },
      ]
    } 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.

profile full bleed

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
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',
          }
        },
        {
          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',
          }
        },
        {
          content: 'LinkedIn',
          icon_before: icon_linkedin,
          url: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com',
          attributes: {
            target: '_blank',
          }
        },
        {
          content: 'Email',
          icon_before: icon_email,
          url: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com',
          attributes: {
            target: '_blank',
          }
        },
      ]
    } 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.