@extends('layouts.master') @section('css') @endsection @section('main_content')

Avatars

Sizes

Using.img- * (70/80/90/100)class you can set the size of avatar

#
#
#
#
<!--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="{{ asset('assets/images/avatar/1.jpg') }}" alt="#">
    </div>
    <div class="avatar">
    <img class="img-90 rounded-circle" src="{{ asset('assets/images/avatar/2.jpg') }}" alt="#">
    </div>
    <div class="avatar">
    <img class="img-80 rounded-circle" src="{{ asset('assets/images/avatar/3.jpg') }}" alt="#">
    </div>
    <div class="avatar">
    <img class="img-70 rounded-circle" src="{{ asset('assets/images/avatar/4.jpg') }}" alt="#">
    </div>

Status Indicator

Using.status-* (online/offline/dnd)class you can set status of avatar.

#
#
#
# 
<!-- You can use status-* class through the set status (online/offline/dnd). -->
    <div class="avatar">
    <img class="img-100 rounded-circle" src="{{ asset('assets/images/avatar/3.jpg') }}" alt="#">
    <div class="status bg-success"></div>
    </div>
    <div class="avatar">
    <img class="img-90 rounded-circle" src="{{ asset('assets/images/avatar/4.jpg') }}" alt="#">
    <div class="status bg-warning"></div>
    </div>
    <div class="avatar"><img class="img-80 rounded-circle" src="{{ asset('assets/images/avatar/5.jpg') }}" alt="#">
    <div class="status bg-danger"></div>
    </div>
    <div class="avatar"><img class="img-70 rounded-circle" src="{{ asset('assets/images/avatar/2.jpg') }}" alt="#">
    <div class="status bg-success"></div>
    </div>

Shapes

Using.b-r-* (0/20/30/40)class you can set shape of avatar.

#
#
#
#
<!-- Give the shape to avatar using .b-r-* class. (15/25/30/35). -->
    <div class="avatar">
    <img class="img-100 b-r-8" src="{{ asset('assets/images/avatar/4.jpg') }}" alt="#">
    </div>
    <div class="avatar">
    <img class="img-90 b-r-30" src="{{ asset('assets/images/avatar/5.jpg') }}" alt="#">
    </div>
    <div class="avatar">
    <img class="img-80 b-r-35" src="{{ asset('assets/images/avatar/6.jpg') }}" alt="#">
    </div>
    <div class="avatar">
    <img class="img-70 rounded-circle" src="{{ asset('assets/images/avatar/7.jpg') }}" alt="#">
    </div>

Grouping

You can set the group of avatars like .img-* (40/50/60/80/100) , .b-r-* (8/30/35)class.

  • #
  • #
  • #
  • #
  • #
  • #
  • #
  • #
  • #
<!-- 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="{{ asset('assets/images/avatar/4.jpg') }}" alt="#">
    </li>
    <li class="d-inline-block">
    <img class="img-80 b-r-30" src="{{ asset('assets/images/avatar/5.jpg') }}" alt="#">
    </li>
    <li class="d-inline-block">
    </li><img class="img-50 b-r-35" src="{{ asset('assets/images/avatar/7.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="{{ asset('assets/images/avatar/2.jpg') }}" alt="#">
    </li>
    <li class="d-inline-block">
    <img class="b-r-8 img-80" src="{{ asset('assets/images/avatar/6.jpg') }}" alt="#">
    </li>
    <li class="d-inline-block">
    <img class="img-60 rounded-circle" src="{{ asset('assets/images/avatar/8.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="{{ asset('assets/images/avatar/4.jpg') }}" alt="">
    </li>
    <li class="d-inline-block">
    <img class="img-40 rounded-circle" src="{{ asset('assets/images/avatar/5.jpg') }}" alt="">
    </li>
    <li class="d-inline-block">
    <img class="img-40 rounded-circle" src="{{ asset('assets/images/avatar/8.jpg') }}" alt="">
    </li>
    </ul>

Ratio

Give the ratio to avatar using.ratio , img-* (70/80/90/100)class.

#
#
#
#
<!-- You can use b-r-* class through the set status (70/80/90/100). -->
    <div class="avatars">
    <div class="avatar ratio">
    <img class="b-r-8 img-100" src="{{ asset('assets/images/avatar/4.jpg') }}" alt="#">
    </div>
    <div class="avatar ratio">
    <img class="b-r-8 img-90" src="{{ asset('assets/images/avatar/5.jpg') }}" alt="#">
    </div>
    <div class="avatar ratio">
    <img class="b-r-8 img-80" src="{{ asset('assets/images/avatar/1.jpg') }}" alt="#">
    </div>
    <div class="avatar ratio">
    <img class="b-r-8 img-70" src="{{ asset('assets/images/avatar/7.jpg') }}" alt="#">
    </div>

Grouping With Counter

Set the group with counter .img-* , .b-r-*class.

  • #
  • #
  • #
  • +4
  • #
  • #
  • #
  • +2
<!-- You can use status-* class through the set status (.img-* , .b-r-*'). -->
    <div class="avatar-showcase">
    <div class="avatars">
    <div class="customers d-inline-block avatar-group">
    <ul class="d-flex">
    <li class="d-inline-block">
    <img class="img-40 b-r-10" src="{{ asset('assets/images/avatar/4.jpg') }}" alt="#">
    </li>
    <li class="d-inline-block">
    <img class="img-40 b-r-10" src="{{ asset('assets/images/avatar/5.jpg') }}" alt="#">
    </li>
    <li class="d-inline-block">
    <img class="img-40 b-r-10" src="{{ asset('assets/images/avatar/6.jpg') }}" alt="#">
    </li>
    <li class="d-inline-block">
    <span class="b-r-10">+4
    </span>
    </li>
    </ul>
    </div>
    <div class="customers d-inline-block avatar-group">
    <ul class="d-flex">
    <li class="d-inline-block">
    <img class="img-40 b-r-30" src="{{ asset('assets/images/avatar/4.jpg') }}" alt="#">
    </li>
    <li class="d-inline-block">
    <img class="img-40 b-r-30" src="{{ asset('assets/images/avatar/5.jpg') }}" alt="#">
    </li>
    <li class="d-inline-block">
    <img class="img-40 b-r-30" src="{{ asset('assets/images/avatar/8.jpg') }}" alt="#">
    </li>
    <li class="d-inline-block">
    <span class="b-r-30">+2
    </span>
    </li>
    </ul>
    </div>
    </div>
    </div>
@endsection @section('scripts') @endsection