Buzzer

Subscribe

Accordion

  • Lorem ipsum

    Lorem ipsum dolor sit amet, elit. Placeat, quibusdam! Voluptate nobis

  • Dolor sit amet

    Lorem ipsum dolor sit amet, consectetur adipisicing Voluptate nobis

Image Gallery

Avatars

Simple avatar

<img class="avatar" src="../assets/images/xs/avatar1.jpg"/>
<img class="avatar" src="../assets/images/xs/avatar1.jpg"/>
<img class="avatar" src="../assets/images/xs/avatar2.jpg"/>
<img class="avatar" src="../assets/images/xs/avatar3.jpg"/>
<img class="avatar" src="../assets/images/xs/avatar4.jpg"/>

Avatar size

<img class="avatar avatar-sm" src="../assets/images/xs/avatar1.jpg"/>
<img class="avatar" src="../assets/images/xs/avatar2.jpg"/>
<img class="avatar avatar-md" src="../assets/images/xs/avatar3.jpg"/>
<img class="avatar avatar-lg" src="../assets/images/xs/avatar4.jpg"/>
<img class="avatar avatar-xl" src="../assets/images/xs/avatar5.jpg"/>
<img class="avatar avatar-xxl" src="../assets/images/xs/avatar6.jpg"/>

Avatar status

<img class="avatar" style="../assets/images/xs/avatar4.jpg"/>
<span class="avatar"
    <img class="avatar" src="../assets/images/xs/avatar2.jpg"/>
</span>
<span class="avatar"
    <img class="avatar" src="../assets/images/xs/avatar2.jpg"/>
</span>
<span class="avatar"
    <img class="avatar" src="../assets/images/xs/avatar2.jpg"/>
</span>
<span class="avatar"
    <img class="avatar" src="../assets/images/xs/avatar2.jpg"/>
</span>

Avatar placeholder

RB KH BK
<span class="avatar">RB</span>
<span class="avatar">KH</span>
<span class="avatar">BK</span>
<span class="avatar avatar-placeholder"></span>
<span class="avatar"><i class="fe fe-more-horizontal"></i></span>
NG AM RB PR WH MR DB PP JR RB KH BK CA CW
<span class="avatar avatar-blue">NG</span>
<span class="avatar avatar-azure">AM</span>
<span class="avatar avatar-indigo">RB</span>
<span class="avatar avatar-purple">PR</span>
<span class="avatar avatar-pink">WH</span>
<span class="avatar avatar-red">MR</span>
<span class="avatar avatar-orange">DB</span>
<span class="avatar avatar-yellow">PP</span>
<span class="avatar avatar-lime">JR</span>
<span class="avatar avatar-green">RB</span>
<span class="avatar avatar-teal">KH</span>
<span class="avatar avatar-cyan">BK</span>
<span class="avatar avatar-gray">CA</span>
<span class="avatar avatar-gray-dark">CW</span>

Avatars list

<div class="avatar-list">
    <img class="avatar" src="../assets/images/xs/avatar2.jpg"/>
    <img class="avatar" src="../assets/images/xs/avatar1.jpg"/>
    <img class="avatar" src="../assets/images/xs/avatar4.jpg"/>
    <img class="avatar" src="../assets/images/xs/avatar5.jpg"/>
    <img class="avatar" src="../assets/images/xs/avatar6.jpg"/>
</div>
+8
<div class="avatar-list avatar-list-stacked">
    <img class="avatar" src="../assets/images/xs/avatar1.jpg"/>
    <img class="avatar" src="../assets/images/xs/avatar2.jpg"/>
    <img class="avatar" src="../assets/images/xs/avatar3.jpg"/>
    <img class="avatar" src="../assets/images/xs/avatar4.jpg"/>
    <img class="avatar" src="../assets/images/xs/avatar5.jpg"/>
    <span class="avatar">+8</span>
</div>