Documentation v1.1.4

Preview

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/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-2by3 class 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>

Label

Set symbol label within .symbol-label element and style it with text and background utility classes:
A
L
C
T
X
S
<div class="symbol symbol-50px">
    <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 bg-danger text-inverse-danger">L</div>
</div>

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

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

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

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

Badge

Add a badge element using .badge component inside a symbol element:
A
3
A
3
A
3
A
3
<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-semibold">A</div>
    <span class="symbol-badge badge badge-circle bg-danger start-100">3</span>
</div>

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

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

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

Styles

Use .symbol-circle and .symbol-square classes to change a symbol element's style:
A
A
A
<div class="symbol symbol-50px">
    <div class="symbol-label" style="background-image:url(assets/media/avatars/300-6.jpg)"></div>
</div>

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

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

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

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

<div class="symbol symbol-50px symbol-square">
    <div class="symbol-label fs-2 fw-semibold 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 xs and .symbol-{breakpoint}-{size} for sm, md, lg, xl, and xxl.
Where size is 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
  • 90px - for classes that set height and width to 90px
  • 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>

Group

Wrap symbols with .symbol-group class to have a group with slighly overlapped symbols:
L
A
<div class="symbol-group symbol-hover">
    <div class="symbol symbol-circle symbol-50px">
        <img src="assets/media/avatars/300-6.jpg" alt=""/>
    </div>

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

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

    <div class="symbol symbol-circle symbol-50px mb-10">
        <div class="symbol-label fs-2 fw-semibold bg-success text-inverse-success">A</div>
    </div>

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

    <div class="symbol symbol-circle symbol-50px">
        <img src="assets/media/avatars/300-23.jpg" alt=""/>
    </div>
</div>
Preview Get Help Buy Now