- var theme_customizer = true; - var sidebar = true; - var slick = true; - var header_slider = true; - var animate = true; - var scrollbar = true; - var prism = true; - var clipboard = true; - var customcard = true; - var height_equal = true; doctype html html(lang='en') include ../../components/header-files body include ../../components/loader include ../../components/taptop // page-wrapper Start #pageWrapper.page-wrapper.compact-wrapper include ../../components/header // Page Body Start .page-body-wrapper include ../../components/sidebar .page-body .container-fluid .page-title .row .col-6 h4 | Avatars .col-6 ol.breadcrumb li.breadcrumb-item a(href='index.html') svg.stroke-icon use(href='../assets/svg/icon-sprite.svg#stroke-home') li.breadcrumb-item Ui Kits li.breadcrumb-item.active Avatars // Container-fluid starts .container-fluid .user-profile .row .col-xl-4.col-md-6 .card.height-equal .card-header h4.mb-0 Sizes p.mb-0.mt-1 | You can change the size of avatar using code .img- * (70/80/90/100) | class. .card-header-right ul.list-unstyled.card-option li i.fa.fa-spin.fa-cog li i.view-html.fa.fa-code li i.icofont.icofont-maximize.full-card li i.icofont.icofont-minus.minimize-card li i.icofont.icofont-refresh.reload-card li i.icofont.icofont-error.close-card .card-body.avatar-showcase .avatars div.avatar img.img-100.rounded-circle(src='../assets/images/avtar/3.jpg', alt='#') div.avatar img.img-90.rounded-circle(src='../assets/images/avtar/4.jpg', alt='#') div.avatar img.img-80.rounded-circle(src='../assets/images/avtar/7.jpg', alt='#') div.avatar img.img-70.rounded-circle(src='../assets/images/avtar/11.jpg', alt='#') .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-size', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#avatar-size | <!--You can use img-* class through change the size of avatar (70/80/90/100).--> |<div class="avatar"> |<img class="img-100 rounded-circle" src="../assets/images/avtar/3.jpg" alt="#"> |</div> |<div class="avatar"> |<img class="img-90 rounded-circle" src="../assets/images/avtar/4.jpg" alt="#"> |</div> |<div class="avatar"> |<img class="img-80 rounded-circle" src="../assets/images/avtar/7.jpg" alt="#"> |</div> |<div class="avatar"> |<img class="img-70 rounded-circle" src="../assets/images/avtar/11.jpg" alt="#"> |</div> .col-xl-4.col-md-6 .card.height-equal .card-header h4.mb-0 Status Indicator p.mb-0.mt-1 | Using code .status-* (online/offline/dnd) | class you can set the status of avatar. .card-header-right ul.list-unstyled.card-option li i.fa.fa-spin.fa-cog li i.view-html.fa.fa-code li i.icofont.icofont-maximize.full-card li i.icofont.icofont-minus.minimize-card li i.icofont.icofont-refresh.reload-card li i.icofont.icofont-error.close-card .card-body.avatar-showcase .avatars div.avatar img.img-100.rounded-circle(src='../assets/images/user/1.jpg', alt='#') .status.status-online div.avatar img.img-90.rounded-circle(src='../assets/images/avtar/16.jpg', alt='#') .status.status-dnd div.avatar img.img-80.rounded-circle(src='../assets/images/avtar/7.jpg', alt='#') .status.status-offline div.avatar img.img-70.rounded-circle(src='../assets/images/avtar/3.jpg', alt='#') .status.status-online .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-indicator', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#avatar-indicator |<!-- You can use status-* class through the set status (online/offline/dnd). --> |<div class="avatar"> |<img class="img-100 rounded-circle" src="../assets/images/user/1.jpg" alt="#"> |<div class="status status-online"></div> |</div> |<div class="avatar"> |<img class="img-90 rounded-circle" src="../assets/images/avtar/16.jpg" alt="#"> |<div class="status status-dnd"></div> |</div> |<div class="avatar"><img class="img-80 rounded-circle" src="../assets/images/avtar/7.jpg" alt="#"> |<div class="status status-offline"></div> |</div> |<div class="avatar"><img class="img-70 rounded-circle" src="../assets/images/avtar/3.jpg" alt="#"> |<div class="status status-online"></div> |</div> .col-xl-4.col-md-6 .card.height-equal .card-header h4 Shapes p.mb-0.mt-1 | Using the code .b-r-* (8/30/35/25) | class you can set the shapes of avatar. .card-header-right ul.list-unstyled.card-option li i.fa.fa-spin.fa-cog li i.view-html.fa.fa-code li i.icofont.icofont-maximize.full-card li i.icofont.icofont-minus.minimize-card li i.icofont.icofont-refresh.reload-card li i.icofont.icofont-error.close-card .card-body.avatar-showcase .avatars div.avatar img.img-100.b-r-8(src='../assets/images/avtar/4.jpg', alt='#') div.avatar img.img-90.b-r-30(src='../assets/images/avtar/16.jpg', alt='#') div.avatar img.img-80.b-r-35(src='../assets/images/avtar/3.jpg', alt='#') div.avatar img.img-70.rounded-circle(src='../assets/images/avtar/11.jpg', alt='#') .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-shapes', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#avatar-shapes |<!-- Give the shape to avatar using .b-r-* class. (8/25/30/35). --> |<div class="avatar"> |<img class="img-100 b-r-8" src="../assets/images/avtar/4.jpg" alt="#"> |</div> |<div class="avatar"> |<img class="img-90 b-r-30" src="../assets/images/avtar/16.jpg" alt="#"> |</div> |<div class="avatar"> |<img class="img-80 b-r-35" src="../assets/images/avtar/3.jpg" alt="#"> |</div> |<div class="avatar"> |<img class="img-70 rounded-circle" src="../assets/images/avtar/11.jpg" alt="#"> |</div> .col-md-6 .card.height-equal .card-header h4 Ratio p.mb-0.mt-1 | Give the shape to avatar using code .ratio | and code img-* (50/70/80/90/100) | class. .card-header-right ul.list-unstyled.card-option li i.fa.fa-spin.fa-cog li i.view-html.fa.fa-code li i.icofont.icofont-maximize.full-card li i.icofont.icofont-minus.minimize-card li i.icofont.icofont-refresh.reload-card li i.icofont.icofont-error.close-card .card-body.avatar-showcase .avatars div.avatar.ratio img.b-r-8.img-100(src='../assets/images/avtar/11.jpg', alt='#') div.avatar.ratio img.b-r-8.img-90(src='../assets/images/avtar/4.jpg', alt='#') div.avatar.ratio img.b-r-8.img-80(src='../assets/images/user/1.jpg', alt='#') div.avatar.ratio img.b-r-8.img-70(src='../assets/images/avtar/16.jpg', alt='#') div.avatar.ratio img.b-r-8.img-50(src='../assets/images/avtar/7.jpg', alt='#') .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-ratio', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#avatar-ratio |<!-- You can use b-r-* class through the set status (100/90/80/70/50). --> |<div class="avatars"> |<div class="avatar ratio"> |<img class="b-r-8 img-100" src="../assets/images/avtar/11.jpg" alt="#"> |</div> |<div class="avatar ratio"> |<img class="b-r-8 img-90" src="../assets/images/avtar/4.jpg" alt="#"> |</div> |<div class="avatar ratio"> |<img class="b-r-8 img-80" src="../assets/images/user/1.jpg" alt="#"> |</div> |<div class="avatar ratio"> |<img class="b-r-8 img-70" src="../assets/images/avtar/16.jpg" alt="#"> |</div> |<div class="avatar ratio"> |<img class="b-r-8 img-50" src="../assets/images/avtar/7.jpg" alt="#"> |</div> .col-xl-6 .card.height-equal .card-header h4 Grouping p.mb-0.mt-1 | You can set the group of avatars like code .img-* (40/50/60/80/100) | and code .b-r-* (8/30/35) | . .card-header-right ul.list-unstyled.card-option li i.fa.fa-spin.fa-cog li i.view-html.fa.fa-code li i.icofont.icofont-maximize.full-card li i.icofont.icofont-minus.minimize-card li i.icofont.icofont-refresh.reload-card li i.icofont.icofont-error.close-card .card-body.avatar-showcase .avatars .customers.d-inline-block.avatar-group ul li.d-inline-block img.img-100.b-r-8(src='../assets/images/avtar/4.jpg', alt='#') li.d-inline-block img.img-80.b-r-30(src='../assets/images/avtar/16.jpg', alt='#') li.d-inline-block img.img-50.b-r-35(src='../assets/images/avtar/3.jpg', alt='#') .customers.d-inline-block.avatar-group ul li.d-inline-block img.img-60.rounded-circle(src='../assets/images/avtar/16.jpg', alt='#') li.d-inline-block img.b-r-8.img-80(src='../assets/images/user/1.jpg', alt='#') li.d-inline-block img.img-60.rounded-circle(src='../assets/images/avtar/16.jpg', alt='#') .customers.d-inline-block.avatar-group ul li.d-inline-block img.img-40.rounded-circle(src='../assets/images/user/3.jpg', alt='') li.d-inline-block img.img-40.rounded-circle(src='../assets/images/user/5.jpg', alt='') li.d-inline-block img.img-40.rounded-circle(src='../assets/images/user/1.jpg', alt='') .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-grouping', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#avatar-grouping |<!-- You can set the group of avatars use img-* and .b-r-* class (40/50/60/80/100) and (8/30/35). --> |<div class="customers d-inline-block avatar-group"> |<ul> |<li class="d-inline-block"> |<img class="img-100 b-r-8" src="../assets/images/avtar/4.jpg" alt="#"> |</li> |<li class="d-inline-block"> |<img class="img-80 b-r-30" src="../assets/images/avtar/16.jpg" alt="#"> |</li> |<li class="d-inline-block"> |</li><img class="img-50 b-r-35" src="../assets/images/avtar/3.jpg" alt="#"> |</ul> |</div> |<div class="customers d-inline-block avatar-group"> |<ul> |<li class="d-inline-block"> |<img class="img-60 rounded-circle" src="../assets/images/avtar/16.jpg" alt="#"> |</li> |<li class="d-inline-block"> |<img class="b-r-8 img-80" src="../assets/images/user/1.jpg" alt="#"> |</li> |<li class="d-inline-block"> |<img class="img-60 rounded-circle" src="../assets/images/avtar/16.jpg" alt="#"> |</li> |</ul> |</div> |<div class="customers d-inline-block avatar-group"> |<ul> |<li class="d-inline-block"> |<img class="img-40 rounded-circle" src="../assets/images/user/3.jpg" alt=""> |</li> |<li class="d-inline-block"> |<img class="img-40 rounded-circle" src="../assets/images/user/5.jpg" alt=""> |</li> |<li class="d-inline-block"> |<img class="img-40 rounded-circle" src="../assets/images/user/1.jpg" alt=""> |</li> |</ul> // Container-fluid Ends include ../../components/footer include ../../components/footer-files