Back to the list

Avatar

Avatars are created in three different versions: with picture, with a letter and with an icon.

File to include

@import "components/avatar";

With picture

Avatar Avatar Avatar Avatar Avatar Avatar Avatar 
<span class="avatar" data-size="xxl">
    <img src="/assets/images/s-pic-avatar.jpg" alt="Avatar">
</span>

<span class="avatar" data-size="xl">
    <img src="/assets/images/s-pic-avatar.jpg" alt="Avatar">
</span>

<span class="avatar" data-size="l">
    <img src="/assets/images/s-pic-avatar.jpg" alt="Avatar">
</span>

<span class="avatar" data-size="m">
    <img src="/assets/images/s-pic-avatar.jpg" alt="Avatar">
</span>

<span class="avatar" data-size="s">
    <img src="/assets/images/s-pic-avatar.jpg" alt="Avatar">
</span>

<span class="avatar" data-size="xs">
    <img src="/assets/images/s-pic-avatar.jpg" alt="Avatar">
</span>

<span class="avatar" data-size="xxs">
    <img src="/assets/images/s-pic-avatar.jpg" alt="Avatar">
</span>

With a letter

A A A A A A A 
<span class="avatar" data-size="xxl" data-color="primary">A</span>
<span class="avatar" data-size="xl" data-color="secondary">A</span>
<span class="avatar" data-size="l" data-color="success">A</span>
<span class="avatar" data-size="m" data-color="danger">A</span>
<span class="avatar" data-size="s" data-color="warning">A</span>
<span class="avatar" data-size="xs" data-color="gray">A</span>
<span class="avatar" data-size="xxs" data-color="black">A</span>

With an icon

<span class="avatar" data-size="xxl" data-color="primary">
    <fajny-icon icon-name="user-solid"></fajny-icon>
</span>

<span class="avatar" data-size="xl" data-color="secondary">
    <fajny-icon icon-name="user-solid"></fajny-icon>
</span>

<span class="avatar" data-size="l" data-color="success">
    <fajny-icon icon-name="user-solid"></fajny-icon>
</span>

<span class="avatar" data-size="m" data-color="danger">
    <fajny-icon icon-name="user-solid"></fajny-icon>
</span>

<span class="avatar" data-size="s" data-color="warning">
    <fajny-icon icon-name="user-solid"></fajny-icon>
</span>

<span class="avatar" data-size="xs" data-color="gray">
    <fajny-icon icon-name="user-solid"></fajny-icon>
</span>

<span class="avatar" data-size="xxs" data-color="black">
    <fajny-icon icon-name="user-solid"></fajny-icon>
</span>

Attributes

Name Example value Possible values Default Required
data-size m "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" xxl No
data-color success "primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "black" | "white" primary No