Component Listing

AVATARS

Avatars displays user image or initials as profile picture. Oxygen provides 3 types of avatars namely:

Circular Avatars | Square Avatars | Avatars with
                        Status

.
To use these avatars in your project import the below stylesheet.


@import url("https://oxygen-ui-component-library.netlify.app/components/avatar/avatar.css")

Circular Avatars

Circular avatar component is used to display profile pictures or initials in circular containers.
Use the base class circular-avatar to generate a circular avatar. Oxygen provides 5 sizes namely: avatar-xl (5rem), avatar-l (4rem), avatar-md (3rem), avatar-s (2rem) and avatar-xs (1rem).
Use the class

avatar-xl | avatar-l |
                            avatar-md | avatar-s | avatar-xs

respectively to get the appropriate size in your project.


<div class="avatar-container flex-row">
    <img class="avatar-xl circular-avatar m-1" src="https://picsum.photos/200" alt="avatar-img">
    <img class="avatar-l circular-avatar m-1" src="https://picsum.photos/200" alt="avatar-img">
    <img class="avatar-md circular-avatar m-1" src="https://picsum.photos/200" alt="avatar-img">
    <img class="avatar-sm circular-avatar m-1" src="https://picsum.photos/200" alt="avatar-img">
    <img class="avatar-xs circular-avatar m-1" src="https://picsum.photos/200" alt="avatar-img">
</div>

Sqaure Avatars

Square avatar component is used to display profile pictures or initials in square containers.
Use the base class square-avatar to generate a circular avatar. Oxygen provides 5 sizes namely: avatar-xl (5rem), avatar-l (4rem), avatar-md (3rem), avatar-s (2rem) and avatar-xs (1rem).
Use the class

avatar-xl | avatar-l |
                            avatar-md | avatar-s | avatar-xs

respectively to get the appropriate size in your project..


<div class="avatar-container flex-row">
    <img class="avatar-xl square-avatar m-1" src="https://picsum.photos/200" alt="avatar-img">
    <img class="avatar-l square-avatar m-1" src="https://picsum.photos/200" alt="avatar-img">
    <img class="avatar-md square-avatar m-1" src="https://picsum.photos/200" alt="avatar-img">			
    <img class="avatar-sm square-avatar m-1" src="https://picsum.photos/200" alt="avatar-img">
    <img class="avatar-xs square-avatar m-1" src="https://picsum.photos/200" alt="avatar-img">
</div>

Avatars with Status

Avatar with a status essentially displays profile pictures or initials along with their status.
Use the base class avatar-status to generate a simple status without any color. Oxygen provides 3 status types namely: online, busy and offline.
Use the class

status-online | status-busy | status-offline

respectively to get the appropriate status in your project.


<div class="avatar-container flex-row">
    <div class="avatar-status-container m-1">
        <img class="circular-avatar avatar-xl" src="https://picsum.photos/200" alt="avatar">
        <span class="avatar-status status-online status-position-xl"></span>
    </div>
    <div class="avatar-status-container m-1">
        <img class="circular-avatar avatar-l" src="https://picsum.photos/200" alt="avatar">
        <span class="avatar-status status-busy status-position-l"></span>
    </div>                    
    <div class="avatar-status-container m-1">
        <img class="circular-avatar avatar-md" src="https://picsum.photos/200" alt="avatar">
        <span class="avatar-status status-offline status-position-md"></span>
    </div>                    
    <div class="avatar-status-container m-1">
        <img class="circular-avatar avatar-sm" src="https://picsum.photos/200" alt="avatar">
        <span class="avatar-status status-busy status-position-sm"></span>
    </div>                    
    <div class="avatar-status-container m-1">
        <img class="circular-avatar avatar-xs" src="https://picsum.photos/200" alt="avatar">
        <span class="avatar-status status-online status-position-xs"></span>
    </div>
</div>