Internal Site UI
Internal Site UI
  1. Home
  2. Symbol

Symbol

Basic

Refer to below example to use Symbol for avatar image display:
                  <div class="symbol symbol-50px">
                  <img src="assets/media/avatars/300-6.jpg" alt=""/>
                  </div>

Background Image

Refer to below example to place avatar as background image:
<div class="symbol symbol-50px">
<div class="symbol-label" style="background-image:url('../../assets/media/avatars/300-12.jpg')"></div>
</div>

Ratio

Use .symbol-2by3class to set avatar background image with 2 by 3 ratio:
<div class="symbol symbol-50px symbol-2by3">
<img src="../../assets/media/avatars/300-6.jpg" alt=""/>
</div>

Sizes

Assign responsive-friendly size to a symbol element with shorthand classes. The classes are named using the format .symbol-{size}for xsand .symbol-{breakpoint}-{size}for sm, md, lg, xl, and xxl.
Where sizeis one of:
  • 20px- for classes that set height and width to 20px
  • 25px- for classes that set height and width to 25px
  • 30px- for classes that set height and width to 30px
  • 35px- for classes that set height and width to 35px
  • 40px- for classes that set height and width to 40px
  • 45px- for classes that set height and width to 45px
  • 50px- for classes that set height and width to 50px
  • 55px- for classes that set height and width to 55px
  • 60px- for classes that set height and width to 60px
  • 65px- for classes that set height and width to 65px
  • 70px- for classes that set height and width to 70px
  • 75px- for classes that set height and width to 75px
  • 100px- for classes that set height and width to 100px
  • 125px- for classes that set height and width to 125px
  • 150px- for classes that set height and width to 150px
  • 160px- for classes that set height and width to 160px
  • 175px- for classes that set height and width to 175px
  • 200px- for classes that set height and width to 200px
A
A
A
A
A
A
<div class="symbol symbol-30px">
<div class="symbol-label fs-2 fw-semibold text-success">A</div>
</div>
<div class="symbol symbol-50px">
<div class="symbol-label fs-2 fw-semibold text-success">A</div>
</div>
<div class="symbol symbol-75px">
<div class="symbol-label fs-2 fw-semibold text-success">A</div>
</div>
<div class="symbol symbol-100px">
<div class="symbol-label fs-2 fw-semibold text-success">A</div>
</div>
<div class="symbol symbol-125px">
<div class="symbol-label fs-2 fw-semibold text-success">A</div>
</div>
<div class="symbol symbol-150px">
<div class="symbol-label fs-2 fw-semibold text-success">A</div>
</div>