No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

This is a pre-release version and is not production ready. For new and ongoing projects, please refer to the latest Design System version.

Avatar

Figma Design

Display a user's profile picture or their initials if the picture is unavailable.

<post-avatar firstname="Firstname"></post-avatar>
NameDescriptionDefaultControl
props
firstname*
Defines the users firstname.
string
lastname
Defines the users lastname.
string
userid
Defines the company internal userId.
string
email
Defines the users email address associated with a gravatar profile picture.
string
Content
imageSrc
Define an image src to insert a custom image.
string
-
slots
default
Slot for inserting a custom image as avatar.
HTMLImageElement
--

Nest the <post-avatar> component inside an anchor tag to make it clickable. Use this approach to create a link to the user profile.

<a href="#"><post-avatar firstname="Firstname"></post-avatar></a>

Nest the <post-avatar> component inside a button tag to make it clickable. Use this approach to use the component as a menu toggler, ...

<button><post-avatar firstname="Firstname"></post-avatar></button>

The component provides some css-variables, which allow you to switch the background and the foreground color if needed.

post-avatar {
  --post-avatar-bg: {your-custom-bg-color};
  --post-avatar-fg: {your-custom-fg-color};
}

The <post-avatar> component provides several possibilities to change its appearance. While the only required property is firstname, you can choose freely, which of the other properties you want to use. You can even combine them. The component will always try to show a picture, if possible, and fallback to initials, if not. Please notice, that if you combine several methods to show a picture, the component will use the first one it can get a picture from.

The properties are used in the order as follows:

  1. If you use an <img> tag in the default slot (for example to show a self hosted image), this will override the other properties.

  2. If you use the userid property (to show a company internal user picture) and a picture is available, this will override the email property, as well as firstname and lastname.

  3. If you use the email property (to show a users picture provided through gravatar.com) and a picture is available, this will override the firstname and lastname properties.

  4. As an overall fallback the firstname and lastname properties are used to show at least some initials. And as an addition, firstname and lastname (if defined) are also used on all the other methods to set the alt tag of the image (if not already defined).

Check the Content Security Policy

If your project includes the Content-Security-Policy response header (usually in index.html), make sure that default-src is set to 'self'. The <post-avatar> component is capable of loading images from gravatar, therefore you need to add https://gravatar.com to the connect-src in index.html. This is because the component tries to load a profile picture from there, through the provided email property.