Profile

UI element that summarizes a particular user.

Published Last updated: 5.7.3 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 (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 Install
npm install @bolt/components-profile
Dependencies @bolt/core-v3.x