Overview

Symbol is a custom component for avatars or labels with content colors.

Avatar

Refer to below example to use Symbol for avatar image display:

<div class="symbol symbol-50px">
    <img src="assets/media/avatars/150-1.jpg" alt=""/>
</div>

Avatar Background

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/150-7.jpg')"></div>
</div>

Avatar 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/150-1.jpg" alt=""/>
</div>

Label

Set symbol label within .symbol-labelelement and style it with text and background utility classes:

<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>

<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold bg-danger text-inverse-danger">L</div>
</div>

<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold text-danger">C</div>
</div>

<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold bg-primary text-inverse-primary">T</div>
</div>

<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold text-warning">X</div>
</div>

<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold bg-info text-inverse-info">S</div>
</div>

Badge

Add a badge element using .badgecomponent inside a symbol element:

<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold">A</div>
    <span class="badge badge-circle bg-danger">3</span>
</div>

<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold">A</div>
    <span class="badge badge-circle bg-danger top-100">3</span>
</div>

<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold">A</div>
    <span class="badge badge-circle bg-danger start-0">3</span>
</div>

<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold">A</div>
    <span class="badge badge-circle bg-danger start-0 top-100">3</span>
</div>

Styles

Use .symbol-circleand .symbol-squareclasses to change a symbol element's style:

<div class="symbol symbol-50px">
    <div class="symbol-label" style="background-image:url(assets/media/avatars/150-1.jpg)"></div>
</div>

<div class="symbol symbol-50px">
<div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>

<div class="symbol symbol-50px symbol-circle">
    <div class="symbol-label" style="background-image:url(assets/media/avatars/150-1.jpg)"></div>
</div>

<div class="symbol symbol-50px symbol-circle">
    <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>

<div class="symbol symbol-50px symbol-square">
    <div class="symbol-label" style="background-image:url(assets/media/avatars/150-1.jpg)"></div>
</div>

<div class="symbol symbol-50px symbol-square">
    <div class="symbol-label fs-2 fw-bold text-success">A</div>
</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

<div class="symbol symbol-30px">
  <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-50px">
  <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-75px">
  <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-100px">
  <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-125px">
  <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-150px">
  <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>

Group

Wrap symbols with .symbol-groupclass to have a group with slighly overlapped symbols:

<div class="symbol-group symbol-hover">
    <div class="symbol symbol-circle symbol-50px">
        <img src="assets/media/avatars/150-1.jpg" alt=""/>
    </div>

    <div class="symbol symbol-circle symbol-50px">
        <img src="assets/media/avatars/150-2.jpg" alt=""/>
    </div>

    <div class="symbol symbol-circle symbol-50px">
        <img src="assets/media/avatars/150-3.jpg" alt=""/>
    </div>

    <div class="symbol symbol-circle symbol-50px">
        <img src="assets/media/avatars/150-4.jpg" alt=""/>
    </div>

    <div class="symbol symbol-circle symbol-50px">
        <img src="assets/media/avatars/150-5.jpg" alt=""/>
    </div>

    <div class="symbol symbol-circle symbol-50px">
        <img src="assets/media/avatars/150-6.jpg" alt=""/>
    </div>
</div>