Profile

UI element that summarizes a particular user.

Published Last updated: 5.5.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