Den Haag Design System

Gebruiker avatar: Orange avatar (van ingelogde gebruiker) 

<div class="user-avatar">
    <div class="user-avatar__oval user-avatar__oval--user">DW</div>
    <div class="user-avatar__content">
        <div class="user-avatar__name">D. Willemsen</div>
        <div class="user-avatar__date">17 juli</div>
    </div>
</div>
 
<div class="user-avatar">
  <div class="user-avatar__oval user-avatar__oval--{{{type}}}">DW</div>
  <div class="user-avatar__content">
    <div class="user-avatar__name">D. Willemsen</div>
    <div class="user-avatar__date">17 juli</div>
  </div>
</div>
 
{
  "type": "user"
}
  • Content: 
    .user-avatar {

  $parent: &;

  display: flex;

  &__oval {
    border: 2px $border-style $orange;
    border-radius: 50%;
    width: calc(#{$base-line-height}em * 2);
    height: calc(#{$base-line-height}em * 2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: $fw-medium;

    &--user {
      border-color: $orange;
      color: $orange;
    }

    &--employee {
      border-color: $blue;
      color: $blue;
    }
  }

  &__content {
    flex: 1;
    padding-left: calc(#{$space-xs});
  }

  &__name {
    font-weight: $fw-medium;
  }

  &__date {
    color: $grey;
  }
}
  • URL: /components/raw/user-avatar/user-avatar.scss
  • Filesystem Path: src/components/01-componenten/user-avatar/user-avatar.scss
  • Size: 619 Bytes

Omschrijving

Het user-avatar component zorgt ervoor dat de gebruiker zijn eigen contactmomenten herkent.

[Afbeelding in live omgeving] Volgt nog. Component staat nog niet live

Changelog

Versie 0.1: component aangemaakt

Beschikbare avatar types

  • user: De ingelogde gebruiker in Mijn Den Haag
  • employee: De medewerker van de gemeente Den Haag