آواتار
از آواتر با اشکال و اندازه های مختلف با یک جزء استفاده کنید.
گرد
<div class="avatar avatar-4xl">
<img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
</div>مربع
<div class="avatar avatar-4xl">
<img src="../../../assets/img/team/2.jpg" alt="" />
</div>نرم
<div class="avatar avatar-4xl">
<img class="rounded-soft" src="../../../assets/img/team/3.jpg" alt="" />
</div>محتوا
12+
<div class="avatar avatar-4xl">
<div class="avatar-name rounded-circle "><span>12+</span></div>
</div>نام
EW
<div class="avatar avatar-4xl">
<div class="avatar-name rounded-circle"><span>EW</span></div>
</div>ایموجی
🎁
<div class="avatar avatar-4xl">
<div class="avatar-emoji rounded-circle "><span role="img" aria-label="Emoji">🎁</span></div>
</div>وضعیت
<div class="row align-items-center">
<div class="col-auto">
<div class="avatar avatar-4xl status-online">
<img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-4xl status-offline">
<img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-4xl status-away">
<img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-4xl status-do-not-disturb">
<img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
</div>
</div>
</div>اندازه ها
<div class="row align-items-center">
<div class="col-auto">
<div class="avatar avatar-5xl">
<img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-4xl">
<img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-3xl">
<img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-2xl">
<img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-xl">
<img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-l">
<img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-m">
<img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-s">
<img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
</div>
</div>
</div>گروه آواتار
+50
+50
+50
+50
+50
+50
+50
+50
<div class="avatar-group">
<div class="avatar avatar-s border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
</div>
<div class="avatar avatar-s border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
</div>
<div class="avatar avatar-s border border-2 border-light rounded-circle">
<div class="avatar-name rounded-circle "><span>+50</span></div>
</div>
</div>
<div class="avatar-group">
<div class="avatar avatar-m border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
</div>
<div class="avatar avatar-m border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
</div>
<div class="avatar avatar-m border border-2 border-light rounded-circle">
<div class="avatar-name rounded-circle "><span>+50</span></div>
</div>
</div>
<div class="avatar-group">
<div class="avatar avatar-l border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
</div>
<div class="avatar avatar-l border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
</div>
<div class="avatar avatar-l border border-2 border-light rounded-circle">
<div class="avatar-name rounded-circle "><span>+50</span></div>
</div>
</div>
<div class="avatar-group">
<div class="avatar avatar-xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
</div>
<div class="avatar avatar-xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
</div>
<div class="avatar avatar-xl border border-2 border-light rounded-circle">
<div class="avatar-name rounded-circle "><span>+50</span></div>
</div>
</div>
<div class="avatar-group">
<div class="avatar avatar-2xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
</div>
<div class="avatar avatar-2xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
</div>
<div class="avatar avatar-2xl border border-2 border-light rounded-circle">
<div class="avatar-name rounded-circle "><span>+50</span></div>
</div>
</div>
<div class="avatar-group">
<div class="avatar avatar-3xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
</div>
<div class="avatar avatar-3xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
</div>
<div class="avatar avatar-3xl border border-2 border-light rounded-circle">
<div class="avatar-name rounded-circle "><span>+50</span></div>
</div>
</div>
<div class="avatar-group">
<div class="avatar avatar-4xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
</div>
<div class="avatar avatar-4xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
</div>
<div class="avatar avatar-4xl border border-2 border-light rounded-circle">
<div class="avatar-name rounded-circle "><span>+50</span></div>
</div>
</div>
<div class="avatar-group">
<div class="avatar avatar-5xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
</div>
<div class="avatar avatar-5xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
</div>
<div class="avatar avatar-5xl border border-2 border-light rounded-circle">
<div class="avatar-name rounded-circle "><span>+50</span></div>
</div>
</div>آواتار گروه متراکم
+50
+50
+50
+50
+50
+50
+50
+50
<div class="avatar-group avatar-group-dense">
<div class="avatar avatar-s border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
</div>
<div class="avatar avatar-s border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
</div>
<div class="avatar avatar-s border border-2 border-light rounded-circle">
<div class="avatar-name rounded-circle "><span>+50</span></div>
</div>
</div>
<div class="avatar-group avatar-group-dense">
<div class="avatar avatar-m border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
</div>
<div class="avatar avatar-m border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
</div>
<div class="avatar avatar-m border border-2 border-light rounded-circle">
<div class="avatar-name rounded-circle "><span>+50</span></div>
</div>
</div>
<div class="avatar-group avatar-group-dense">
<div class="avatar avatar-l border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
</div>
<div class="avatar avatar-l border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
</div>
<div class="avatar avatar-l border border-2 border-light rounded-circle">
<div class="avatar-name rounded-circle "><span>+50</span></div>
</div>
</div>
<div class="avatar-group avatar-group-dense">
<div class="avatar avatar-xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
</div>
<div class="avatar avatar-xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
</div>
<div class="avatar avatar-xl border border-2 border-light rounded-circle">
<div class="avatar-name rounded-circle "><span>+50</span></div>
</div>
</div>
<div class="avatar-group avatar-group-dense">
<div class="avatar avatar-2xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
</div>
<div class="avatar avatar-2xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
</div>
<div class="avatar avatar-2xl border border-2 border-light rounded-circle">
<div class="avatar-name rounded-circle "><span>+50</span></div>
</div>
</div>
<div class="avatar-group avatar-group-dense">
<div class="avatar avatar-3xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
</div>
<div class="avatar avatar-3xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
</div>
<div class="avatar avatar-3xl border border-2 border-light rounded-circle">
<div class="avatar-name rounded-circle "><span>+50</span></div>
</div>
</div>
<div class="avatar-group avatar-group-dense">
<div class="avatar avatar-4xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
</div>
<div class="avatar avatar-4xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
</div>
<div class="avatar avatar-4xl border border-2 border-light rounded-circle">
<div class="avatar-name rounded-circle "><span>+50</span></div>
</div>
</div>
<div class="avatar-group avatar-group-dense">
<div class="avatar avatar-5xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
</div>
<div class="avatar avatar-5xl border border-2 border-light rounded-circle">
<img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
</div>
<div class="avatar avatar-5xl border border-2 border-light rounded-circle">
<div class="avatar-name rounded-circle "><span>+50</span></div>
</div>
</div>
