<div class="user-avatar">
    <div class="user-avatar__oval user-avatar__oval--employee">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": "employee"
}
  • 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