Profile

UI element that summarizes a particular user.

In Progress (Unreleased)
Twig Usage 
{% include '@bolt-components-profile/profile.twig' with {
  name: '<strong>First Last</strong> (@username)',
  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.
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.

 any —
  • —
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 —
    • item
        • attributes

          A Drupal attributes object. Applies extra HTML attributes to the stat container.

          • —
        • label

          Text label of the stat.

          • —
        • number

          Number of the stat.

          • —
full_bleed

Set the profile to expand the full viewport. Use this prop for building a profile header for a particular page.

 boolean false
  • —
Install Install 
npm install @bolt/components-profile
Dependencies @bolt/core-v3.x