UHasselt Component Library

Avatar: Red 

<div class="avatar avatar-red">
    <span>ET</span>
</div>
 
<div class="avatar {{#if modifier}}avatar-{{modifier}}{{/if}}">
    <span>{{firstLetter}}{{lastLetter}}</span>
</div>
 
{
  "firstLetter": "E",
  "lastLetter": "T",
  "modifier": "red"
}
  • Content: 
    .avatar {
    @apply text-white;

    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;

    &.avatar-black {
        @apply bg-black;
    }

    &.avatar-red {
        @apply bg-red;
    }
}
  • URL: /components/raw/avatar/avatar.css
  • Filesystem Path: src\components\02-atoms\avatar\avatar.css
  • Size: 311 Bytes

No notes defined.