Avatar

No notes defined.

<!-- Default -->
<div class=" avatar">
    <div class="avatar__container">
        <img class='avatar__photo' src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='72' width='72' viewBox='0 0 1 1'><rect width='1' height='1' fill='%230001'/></svg>" alt="Jane Doe" />
        <div class="avatar__name">
            Jane Doe
        </div>
        <div class="avatar__title">
            Executive Vice President of Operations
        </div>
    </div>
</div>

<!-- Reversed -->
<div class="-reversed avatar">
    <div class="avatar__container">
        <img class='avatar__photo' src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='72' width='72' viewBox='0 0 1 1'><rect width='1' height='1' fill='%230001'/></svg>" alt="Jane Doe" />
        <div class="avatar__name">
            Jane Doe
        </div>
        <div class="avatar__title">
            Executive Vice President of Operations
        </div>
    </div>
</div>

  • Content:
    @use "/resources/styles/config";
    
    .avatar {
        $b: &;
    
        display: inline-block;
    
        &__container {
            display: grid;
            grid: "photo name" 1fr "photo title" 1fr;
            gap: config.$thin-v-space 0;
        }
    
        &__name {
            font-size: 1.25rem;
            font-weight: bold;
            grid-area: name;
            padding: 0 config.$thin-h-space;
            align-self: end;
        }
    
        &__photo {
            grid-area: photo;
            border-radius: 100%;
            align-self: stretch;
        }
    
        &__title {
            grid-area: title;
            padding: 0 config.$thin-h-space;
        }
    
        &.-reversed {
            #{$b}__container {
                grid: "name photo" 1fr "title photo" 1fr;
            }
    
            #{$b}__name,
            #{$b}__title {
                justify-self: end;
            }
        }
    }
    
  • URL: /components/raw/avatar/_index.scss
  • Filesystem Path: resources/styles/atoms/avatar/_index.scss
  • Size: 785 Bytes