# Avatar

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <div class="avatar avatar--xs">
        <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
    </div>

    <div class="avatar avatar--sm">
        <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
    </div>

    <div class="avatar avatar--md">
        <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
    </div>

    <div class="avatar avatar--base">
        <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
    </div>

    <div class="avatar avatar--xl">
        <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
    </div>

    <div class="avatar avatar--xxl">
        <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
    </div>

`
`

    <div class="avatar avatar--xs">
        <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
    </div>

    <div class="avatar avatar--sm">
        <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
    </div>

    <div class="avatar avatar--md">
        <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
    </div>

    <div class="avatar avatar--base">
        <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
    </div>

    <div class="avatar avatar--xl">
        <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
    </div>

    <div class="avatar avatar--xxl">
        <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      $avatar-size-xs: ms(10); //~40px
      $avatar-size-sm: ms(14); //~55px
      $avatar-size-md: ms(18); //~80px
      $avatar-size-base: ms(22); //~120px
      $avatar-size-xl: ms(29); //r = ~227px
      $avatar-size-xxl: ms(34); //r = ~354px

      .avatar {
        display: inline-block;
      }

      .avatar__image {
        background-color: $avatar-default-bg-color; // Show default background on
        border-radius: 100%;

        .avatar--xs & {
          width: $avatar-size-xs;
          height: $avatar-size-xs;
        }

        .avatar--sm & {
          width: $avatar-size-sm;
          height: $avatar-size-sm;
        }

        .avatar--md & {
          width: $avatar-size-md;
          height: $avatar-size-md;
        }

        .avatar--base & {
          width: $avatar-size-base;
          height: $avatar-size-base;
        }

        .avatar--xl & {
          width: $avatar-size-xl;
          height: $avatar-size-xl;
        }

        .avatar--xxl & {
          max-width: $avatar-size-xxl;
          max-height: $avatar-size-xxl;
        }
      }

  `
- URL: /components/raw/avatar/_avatar.scss
- Filesystem Path: components/05-atoms/media/avatar/_avatar.scss
- Size: 866 Bytes

- Handle: @avatar
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/media/avatar/avatar.html

No notes defined.