PSI Software SE Design Library

Avatar

No notes defined.

<!-- Default -->
<div class="avatar">
    <span class="avatar-initials">BM</span>
</div>


<!-- With Image -->
<div class="avatar">
    <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
</div>


<!-- Placeholder Person -->
<div class="avatar" data-type="person">
    <span class="avatar-initials">BM</span>
</div>


<!-- Placeholder Location -->
<div class="avatar" data-type="location">
    <span class="avatar-initials">BM</span>
</div>


<!-- Large -->
<div class="avatar is-large">
    <span class="avatar-initials">BM</span>
</div>


<!-- Large With Placeholder Person -->
<div class="avatar is-large" data-type="person">
    <span class="avatar-initials">BM</span>
</div>


<!-- Large With Placeholder Location -->
<div class="avatar is-large" data-type="location">
    <span class="avatar-initials">BM</span>
</div>


<!-- Large With Image -->
<div class="avatar is-large">
    <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
</div>


<!-- Documentation only -->
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Default</h2>

        <div class="doc-variant-configuration">
        </div>

        <div class="doc-variant-configuration">
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                    <option value="default">default</option>
                    <option value="accent">accent</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples" data-theme="">

        <div class="avatar">
            <span class="avatar-initials">BM</span>
        </div>

        <div class="avatar" data-type="person">
            <span class="avatar-initials">BM</span>
        </div>

        <div class="avatar" data-type="location">
            <span class="avatar-initials">BM</span>
        </div>

        <div class="avatar">
            <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
        </div>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Large</h2>

        <div class="doc-variant-configuration">
            <ul data-label="Modifier">
                <li>is-large</li>
            </ul>
        </div>

        <div class="doc-variant-configuration">
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                    <option value="default">default</option>
                    <option value="accent">accent</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples" data-theme="">

        <div class="avatar is-large">
            <span class="avatar-initials">BM</span>
        </div>

        <div class="avatar is-large" data-type="person">
            <span class="avatar-initials">BM</span>
        </div>

        <div class="avatar is-large" data-type="location">
            <span class="avatar-initials">BM</span>
        </div>

        <div class="avatar is-large">
            <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
        </div>

    </div>

</section>


<!-- Default -->
<div class="avatar{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    {{#image}}<span class="avatar-image" style="background-image: url({{path src}})"></span>{{/image}}<span class="avatar-initials">{{{initials}}}</span>
</div>

<!-- With Image -->
<div class="avatar{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    {{#image}}<span class="avatar-image" style="background-image: url({{path src}})"></span>{{/image}}<span class="avatar-initials">{{{initials}}}</span>
</div>

<!-- Placeholder Person -->
<div class="avatar{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    {{#image}}<span class="avatar-image" style="background-image: url({{path src}})"></span>{{/image}}<span class="avatar-initials">{{{initials}}}</span>
</div>

<!-- Placeholder Location -->
<div class="avatar{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    {{#image}}<span class="avatar-image" style="background-image: url({{path src}})"></span>{{/image}}<span class="avatar-initials">{{{initials}}}</span>
</div>

<!-- Large -->
<div class="avatar{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    {{#image}}<span class="avatar-image" style="background-image: url({{path src}})"></span>{{/image}}<span class="avatar-initials">{{{initials}}}</span>
</div>

<!-- Large With Placeholder Person -->
<div class="avatar{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    {{#image}}<span class="avatar-image" style="background-image: url({{path src}})"></span>{{/image}}<span class="avatar-initials">{{{initials}}}</span>
</div>

<!-- Large With Placeholder Location -->
<div class="avatar{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    {{#image}}<span class="avatar-image" style="background-image: url({{path src}})"></span>{{/image}}<span class="avatar-initials">{{{initials}}}</span>
</div>

<!-- Large With Image -->
<div class="avatar{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    {{#image}}<span class="avatar-image" style="background-image: url({{path src}})"></span>{{/image}}<span class="avatar-initials">{{{initials}}}</span>
</div>

<!-- Documentation only -->
{{#variants}}
<section class="doc-variant">

    <header class="doc-variant-header">

            {{#title}}
        <h2 class="doc-variant-title">{{{.}}}</h2>
            {{/title}}

        <div class="doc-variant-configuration">
                {{#if modifiers}}
            <ul data-label="Modifier">
                    {{#modifiers}}
                <li>{{{.}}}</li>
                    {{/modifiers}}
            </ul>
                {{/if}}
        </div>

        <div class="doc-variant-configuration">
                {{#if themes}}
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                        {{#themes}}
                    <option value="{{{.}}}">{{{.}}}</option>
                        {{/themes}}
                </select>
            </label>
                {{/if}}
        </div>

    </header>

    <div class="doc-variant-samples" data-theme="{{theme}}">

        {{#samples}}
            {{render '@avatar' (contextData '@avatar' this) merge=true}}
        {{/samples}}

    </div>

</section>
    {{/variants}}
 
/* Default */
{
  "initials": "BM"
}


/* With Image */
{
  "initials": "BM",
  "image": {
    "src": "https://i.pravatar.cc/640"
  }
}


/* Placeholder Person */
{
  "initials": "BM",
  "type": "person",
  "image": null
}


/* Placeholder Location */
{
  "initials": "BM",
  "type": "location",
  "image": null
}


/* Large */
{
  "initials": "BM",
  "modifier": "is-large"
}


/* Large With Placeholder Person */
{
  "initials": "BM",
  "modifier": "is-large",
  "type": "person",
  "image": null
}


/* Large With Placeholder Location */
{
  "initials": "BM",
  "modifier": "is-large",
  "type": "location",
  "image": null
}


/* Large With Image */
{
  "initials": "BM",
  "modifier": "is-large",
  "image": {
    "src": "https://i.pravatar.cc/640"
  }
}


/* Documentation only */
{
  "initials": "BM",
  "variants": [
    {
      "title": "Default",
      "themes": [
        "default",
        "accent"
      ],
      "samples": [
        {
          "initials": "BM"
        },
        {
          "initials": "BM",
          "type": "person",
          "image": null
        },
        {
          "initials": "BM",
          "type": "location",
          "image": null
        },
        {
          "initials": "BM",
          "image": {
            "src": "https://i.pravatar.cc/640"
          }
        }
      ]
    },
    {
      "title": "Large",
      "modifiers": "is-large",
      "themes": [
        "default",
        "accent"
      ],
      "samples": [
        {
          "initials": "BM",
          "modifier": "is-large"
        },
        {
          "initials": "BM",
          "modifier": "is-large",
          "type": "person",
          "image": null
        },
        {
          "initials": "BM",
          "modifier": "is-large",
          "type": "location",
          "image": null
        },
        {
          "initials": "BM",
          "modifier": "is-large",
          "image": {
            "src": "https://i.pravatar.cc/640"
          }
        }
      ]
    }
  ]
}
  • Content: 
    $avatar_size: 112px !default;
$avatar_size--mobile: 48px !default;

$avatar_size--large: 192px !default;
$avatar_size--large--mobile: 80px !default;

$_avatar_placeholders: (
    person: '<svg  width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="{{color}}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4 27C6.42125 22.8162 10.8187 20 16 20C21.1813 20 25.5787 22.8162 28 27"/><circle cx="16" cy="12" r="8"/></svg>',
    location: '<svg width="33" height="33" viewBox="0 0 33 33" fill="none" stroke="{{color}}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M26 13C26 22 16 29 16 29C16 29 6 22 6 13C6 10.3478 7.05357 7.8043 8.92893 5.92893C10.8043 4.05357 13.3478 3 16 3C18.6522 3 21.1957 4.05357 23.0711 5.92893C24.9464 7.8043 26 10.3478 26 13Z"/><circle cx="16" cy="13" r="4"/></svg>',
) !default;

@import "_avatar.settings";
@import "_avatar.styles";

%avatar {
    background-color: $_accent-color;

    &-initials {
        @include text-size(x-large);

        @include not-on-desktop(){
            @include text-size(small);
        }

    }

    &[data-type] {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 50%;
    }

    @each $name, $placeholder in $_avatar_placeholders {

        &[data-type="#{$name}"] {
            background-image: svg-url($placeholder);
        }

        *[data-theme="accent"] &[data-type="#{$name}"] {
            background-image: svg-url($placeholder, $_page-color);
        }

    }

    &[data-type] &-initials {
        display: none;
    }

    *[data-theme="accent"] & {
        color: white;
    }

    *[data-theme="dark"] & {
        color: $_page_color;
    }

}

%avatar--large {
    width: $avatar_size--large;
    height: $avatar_size--large;

    %avatar-initials {
        @include text-size(4x-large);
    }

    @include not-on-desktop(){
        width: $avatar_size--large--mobile;
        height: $avatar_size--large--mobile;

        %avatar-initials {
            @include text-size(2x-large);
        }

    }

}

.avatar.is-large {
    @extend %avatar--large;
}
  • URL: /components/raw/avatar/_avatar.scss
  • Filesystem Path: components/02-elements/avatar/_avatar.scss
  • Size: 2.2 KB
  • Content: 
    $avatar_size: 64px !default;
$avatar_size--mobile: 48px !default;

$avatar_letter-spacing: .03em;

$avatar_initials_styles: (
    display: inline-block,
    font-weight: $_font-weight--bold,
    letter-spacing: $avatar_letter-spacing,
    margin-right: (-1 * $avatar_letter-spacing),
) !default;
  • URL: /components/raw/avatar/_avatar.settings.scss
  • Filesystem Path: components/02-elements/avatar/_avatar.settings.scss
  • Size: 296 Bytes
  • Content: 
    %avatar {
    @include stack-spacing();

    width: $avatar_size;
    height: $avatar_size;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: $_gray-300;
    border-radius: 100vmax;

    overflow: hidden;
    user-select: none;

    &-image {
        display: block;
        flex: 1;
        align-self: stretch;

        background-color: $_gray-100;
        background-size: cover;
    }

    &-image:not([style*="background-image"]) {
        display: none;
    }

    &-initials {
        white-space: nowrap;
        @include styles($avatar_initials_styles);
    }

    &-image[style*="background-image"] ~ &-initials {
        @extend %visually-hidden;
    }

    @include not-on-desktop(){
        width: $avatar_size--mobile;
        height: $avatar_size--mobile;
    }

}

.avatar {
    @extend %avatar;

    &-initials {
        @extend %avatar-initials;
    }

    &-image {
        @extend %avatar-image;
    }

}
  • URL: /components/raw/avatar/_avatar.styles.scss
  • Filesystem Path: components/02-elements/avatar/_avatar.styles.scss
  • Size: 973 Bytes