User Profile

The user profile web component shows detailed information about a user. It is customizable enough to allow you to add more user information or even actions if needed.

Usage

Import

npm i @finastra/user-profile

import '@finastra/user-profile';
...
<fds-user-profile userName="Adnen Manai">
    <div slot="userInfo">[email protected]</div>
    <div slot="actions">
      Actions go here
    </div>
</fds-user-profile>

API

Properties

| Property | Attribute | Type | Default | Description | |-------------|-------------|-----------|---------|--------------------------------------------------| | dense | dense | boolean | false | Align the default avatar with user info | | divider | | boolean | true | | | shortName | shortName | string | "" | Use this property to override the initials | | userName | userName | string | "" | Name of the avatar, used to generate the initials (Displayed on hover) |

Slots

| Name | Description | |------------|---------------------------------| | actions | Actions that a user can perform | | userInfo | The user info |