User Card

The user-card is a layout component for the content of the login flyout. It is shown when the user hovers over the user button in the Page Header. Use it as the content of a Tooltip.

The card has three states:

• anonymous - a welcome headline, the buttons to register or log in, the social logins and a Plus teaser.
• logged in - the Favorites, the navigation of the user area and a Plus teaser to subscribe.
• logged in Plus user - like logged in, but the Plus teaser shows that the user has an active Plus subscription.

The component contains the markup of all states. The state is only a modifier on the block, so a script can change it without rendering new HTML. This is important for cached pages, where the server does not know the user.

Structure

The following code shows the skeleton of the component. The complete markup is in the example below.

<div class="user-card">

  <!-- anonymous -->
  <div class="user-card__anonymous">
    <div class="user-card__headline">Willkommen</div>
    <a class="button button--primary button--pill button--stretch" href="#">Jetzt registrieren</a>
    <a class="button button--pill button--stretch" href="#">Anmelden</a>
    <div class="user-card__line">oder</div>
    <!-- social login buttons -->
  </div>

  <!-- logged in -->
  <div class="user-card__logged-in">
    <div class="user-card__favorite">
      <div class="user-card__headline">Favoriten</div>
      <hr class="separator">
      <div class="favorite"><!-- see Favorite component --></div>
    </div>
    <div class="user-card__navigation">
      <div class="user-card__headline">
        <a class="user-card__profile" href="#">Profil</a>
        <a class="user-card__logout" href="#">Logout</a>
      </div>
      <hr class="separator">
      <ul class="listing listing--suppress-vertical-scrolling listing--no-border">
        <!-- listing items -->
      </ul>
    </div>
  </div>

  <!-- Plus teaser -->
  <div class="user-card__plus">
    <div class="user-card__plus-anonymous"><!-- teaser for anonymous users --></div>
    <div class="user-card__plus-logged-in"><!-- teaser for logged in users --></div>
    <div class="user-card__plus-user"><!-- active Plus user --></div>
  </div>

</div>

The following list describe all existing block/element/modifier classes of the component.

• .user-card - required the block that contains all elements
• Anonymous
  • .user-card__anonymous - the view for anonymous users
  • .user-card__headline - a headline, it is also used in the logged in view
  • .user-card__line - a text with a line on each side, for example “oder”
• Logged in
  • .user-card__logged-in - the view for logged in users, it has two columns
  • .user-card__favorite - the left column with the favorites
  • .user-card__navigation - the right column with the navigation
  • .user-card__profile - the link to the profile within the headline of the navigation
  • .user-card__logout - the logout link within the headline of the navigation
• Plus teaser
  • .user-card__plus - the container of the teaser, it has the Plus background
  • .user-card__plus-anonymous - the teaser for anonymous users
  • .user-card__plus-logged-in - the teaser for logged in users without a Plus subscription
  • .user-card__plus-user - the teaser for users with an active Plus subscription
  • .user-card__plus-logo - the Plus logo
  • .user-card__plus-text - the description
  • .user-card__plus-hint - the small hint, for example the price
  • .user-card__plus-link - the link or button to the Plus offer
• Modifier
  • .user-card--logged-in - show the view for logged in users
  • .user-card--plus-user - show the teaser for Plus users, combine it with .user-card--logged-in

States

The modifier on the block decide which elements are shown. All other elements are hidden.

.user-card--plus-user has no effect without .user-card--logged-in, because a Plus user is always logged in.

The style guide does not set the modifier. A script of the application reads the state of the user and sets them, for example:

const userCard = document.querySelector('.user-card');
userCard.classList.toggle('user-card--logged-in', isLoggedIn);
userCard.classList.toggle('user-card--plus-user', isPlusUser);

Width

In default the card has the small width (width-small). With .user-card--logged-in it uses the big width (width-big) from the screen size lg, because then it shows two columns. Below lg the width stays small.

Usage

The user-card is the content of a tooltip. The tooltip handles the hover, the position and closing of the flyout.

<a href="#" data-sg-tooltip-ref="login-desktop">Anmelden</a>
<div class="tooltip" data-sg-tooltip data-sg-tooltip-id="login-desktop" data-sg-tooltip-placement="bottom-end">
  <div class="user-card"><!-- ... --></div>
</div>

Example (use the switches to change the state):

Custom properties

All values can be changed with custom properties of the form --sg-user-card-{KEY}. The properties are set by the theme, the following table shows the keys and the default values.

.user-card {
  --sg-user-card-width-big: 50rem;
  --sg-user-card-plus-background: #f0f4ff;
}

The dark scheme overwrites the colors of the table.