Avatar

    @import url("https://openui.netlify.app/pages/components/Avatar/avatar.css");
    <link rel="stylesheet" 
    href="https://openui.netlify.app/pages/components/Avatar/avatar.css">
            

Standard Avatars

The avatar component has 5 sizes, avatar-xl (4em), avatar-lg (3em), avatar-std (2em) avatar-sm (1.5em), and avatar-xs (1em).

    <figure class="avatar avatar-xl">
        <img src="..." alt="..."/>
    </figure>

    <figure class="avatar avatar-std">
        <img src="..." alt="..."/>
    </figure>
            

Avatars with status

Avatars support presence indicators. There are three indicators online, offline and dnd.

    <figure class="avatar avatar-xl">
        <img src="..." alt="..."/>
        <div class="avatar-presence dnd">
    </figure>

    <figure class="avatar avatar-lg">
        <img src="..." alt="..."/>
        <div class="avatar-presence offline">
    </figure>