Profile card

The profile card is a popover that displays comprehensive information about a particular item onHover.

Usage

Our goal is to simplify the UI by focusing on its key features, providing users with a clear overview. To achieve this, we make use of the profile card, which displays additional data when the user hovers over a regarding item. This way, we strike a balance between keeping the UI uncluttered while still allowing users to access more detailed information when needed.

Anatomy

Key elements

Profile card avatar. Depending on the use case, a company logo, user image, or the like is displayed here.
Icons. There are recurring properties that should always be represented by the same icon. You can find a detailed list of icons below. If your icon is not on the list, please contact the WUI team.
Header. A default image is displayed if no image is stored for the header image.
The default background color of the header is --wui-color-white
Body. To avoid scrolling or display issues, it is recommended to limit the total height of the profile card to approximately 400px by choosing an appropriate number of items within the body.
Footer. The footer is optional. In order to keep the body content as concise as possible and avoid exceeding the maximum height, we provide a link in the footer that displays additional information when clicked.

Variants

We display the compact variant if no image source is available. Despite the absence of images, the same design principles and guidelines used in the default variant apply to this variant as well.
The default background color of the header is --wui-color-plum

WUI decisions

Overlapping. Keep in mind that the profile card may overlap its trigger. Never make clickable functions inaccessible by doing so.
Timing. The appearance and disappearance of the profile card is both delayed by 600ms.
Profile maintenance. We display an "edit profile" link when a user views their own profile card, providing them with the ability to edit their profile, add missing information, upload a new image, and so on. Our goal is to make it as easy as possible for the user to complete their profile.
Icons. List of recurring icons:
(fa-light fa-location-dot) for an address
(fa-light fa-mobile) for phone numbers
(fa-light fa-envelope) for e-mail addresses

Description

The profile card displays comprehensive information about a particular profile like a user or a company.

Example

<wui-profile-card
  background-image="https://loremflickr.com/600/200/abstract"
  profile-image-url="https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/890.jpg"
  profile-image-alt-text="Profile image of Ernst Bummelsbacher"
>
  <p class="text--bold">Ernst Bummelsbacher</p>

  <div class="display--flex" style="gap: 10px">
    <wui-fa-icon :icon="['fal', 'location-dot']" />
    <p class="flex-grow-1">
      Australian Book GmbH<br />
      Überseealle 23<br />
      Hamburg<br />
      Germany
    </p>
  </div>

  <div class="display--flex" style="gap: 10px">
    <wui-fa-icon :icon="['fal', 'envelope']" />
    <p class="flex-grow-1">
      <wui-link href="mailto:ernst.bummelsbacher@australian-book.de" disabled
        >ernst.bummelsbacher@australian-book.de</wui-link
      >
    </p>
  </div>

  <div class="display--flex" style="gap: 10px">
    <wui-fa-icon :icon="['fal', 'mobile']" />
    <p class="flex-grow-1">0173 / 333 444 00</p>
  </div>

  <template #footer>
    <wui-button href="#" variant="link">Show profile</wui-button>
  </template>
</wui-profile-card>

<!-- wui-profile-card-basic.vue -->

Compact mode

When compact prop is set, the avatar image will be hidden and the header is rendered at a smaller height. You are responsible for displaying the necessary header information (e.g. user name, company name) via the header slot.

<wui-profile-card
  background-image="https://loremflickr.com/600/200/abstract"
  profile-image-url="https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/890.jpg"
  profile-image-alt-text="Profile image of Ernst Bummelsbacher"
  compact
>
  <template #header>
    <div class="text--bold" style="color: #fff">{ user.name }</div>
    <div style="color: #fff">E-Business Manager</div>
  </template>

  <div class="display--flex" style="gap: 10px">
    <wui-fa-icon :icon="['fal', 'location-dot']" />
    <p class="flex-grow-1">
      Australian Book GmbH<br />
      Überseealle 23<br />
      Hamburg<br />
      Germany
    </p>
  </div>

  <div class="display--flex" style="gap: 10px">
    <wui-fa-icon :icon="['fal', 'envelope']" />
    <p class="flex-grow-1">
      <wui-link href="mailto:ernst.bummelsbacher@australian-book.de" disabled
        >ernst.bummelsbacher@australian-book.de</wui-link
      >
    </p>
  </div>

  <div class="display--flex" style="gap: 10px">
    <wui-fa-icon :icon="['fal', 'mobile']" />
    <p class="flex-grow-1">0173 / 333 444 00</p>
  </div>

  <template #footer>
    <wui-button href="#" variant="link">Show profile</wui-button>
  </template>
</wui-profile-card>

<!-- wui-profile-card-compact.vue -->

Component reference

Properties

Property	Type	Default	Description
`backgroundImage`	`Boolean`	`false`	The header background image. Only available if `compact` is `false`
`compact`	`String`	`''`	Whether or not the component should render in compact mode. You need to provide the header content via the `header` slot
`profileImageUrl`	`String`		The profile image url (e.g. user image or company logo). Only available if `compact` is `false`
`profileImageAltText`	`String`		The text for the HTML img `alt` attribute. Only available if `compact` is `false`

Slots

Name	Description
`avatar`	Content to place in the avatar
`default`	Content to place in the profile-card
`footer`	Content to place in the footer
`header`	Content to place in the header

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export
`<wui-profile-card>`	`WuiProfileCard`

Example

import { WuiProfileCard } from "@wui/wui-vue/lib";
Vue.component("wui-profile-card", WuiProfileCard);

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export	Import Path
`ProfileCardPlugin`	`@wui/wui-vue/lib`

Example

import { ProfileCardPlugin } from "@wui/wui-vue/lib";
Vue.use(ProfileCardPlugin);

From WUI and

with

WUI is wescale’s design system