No results for " "
Make sure that all words are spelled correctly.
Start typing to search for
Products, orders, customers, actions, etc.
Notifications
Mark All as Read
See all 15 notifications

Symbols

Documentation and examples for symbols, our component for displaying user avatars and initials.
Table of Content

Basic Example #

Typically, a symbol consists of a .sa-symbol container and an <img> child element.

Example
<div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--xxl">
    <img src="" width="128" height="128" alt="" />
</div>

Sizes #

Use the .sa-symbol--size--* classes to set the size of the symbol.

Example
<div class="row g-3 align-items-center">
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--xs">
            <img src="" width="128" height="128" alt="" />
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--sm">
            <img src="" width="128" height="128" alt="" />
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--md">
            <img src="" width="128" height="128" alt="" />
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--lg">
            <img src="" width="128" height="128" alt="" />
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--xl">
            <img src="" width="128" height="128" alt="" />
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--xxl">
            <img src="" width="128" height="128" alt="" />
        </div>
    </div>
</div>

You can also set the symbol size using any font size utilities such as fs-* .

Example
<div class="row g-3 align-items-center">
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle fs-6">
            <img src="" width="128" height="128" alt="" />
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle fs-5">
            <img src="" width="128" height="128" alt="" />
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle fs-4">
            <img src="" width="128" height="128" alt="" />
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle fs-3">
            <img src="" width="128" height="128" alt="" />
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle fs-2">
            <img src="" width="128" height="128" alt="" />
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle fs-1">
            <img src="" width="128" height="128" alt="" />
        </div>
    </div>
</div>

Initials #

Display initials using the .sa-symbol__text element instead of <img> if the user does not have an avatar.

Example
GB
GB
GB
GB
GB
GB
<div class="row g-3 align-items-center">
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--xs">
            <div class="sa-symbol__text">GB</div>
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--sm">
            <div class="sa-symbol__text">GB</div>
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--md">
            <div class="sa-symbol__text">GB</div>
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--lg">
            <div class="sa-symbol__text">GB</div>
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--xl">
            <div class="sa-symbol__text">GB</div>
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--xxl">
            <div class="sa-symbol__text">GB</div>
        </div>
    </div>
</div>

Status Badge #

Need to display user status? No problem, use the .sa-symbol__status element and the .sa-symbol--status--* modifier.

Example
<div class="row g-3 align-items-center">
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--lg
                sa-symbol--status--offline
            "
        >
            <img src="" width="128" height="128" alt="" />
            <div class="sa-symbol__status"></div>
        </div>
    </div>
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--lg
                sa-symbol--status--online
            "
        >
            <img src="" width="128" height="128" alt="" />
            <div class="sa-symbol__status"></div>
        </div>
    </div>
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--lg
                sa-symbol--status--away
            "
        >
            <img src="" width="128" height="128" alt="" />
            <div class="sa-symbol__status"></div>
        </div>
    </div>
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--lg
                sa-symbol--status--busy
            "
        >
            <img src="" width="128" height="128" alt="" />
            <div class="sa-symbol__status"></div>
        </div>
    </div>
</div>

Status in symbols of different sizes.

Example
<div class="row g-3 align-items-center">
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--xs
                sa-symbol--status--online
            "
        >
            <img src="" width="128" height="128" alt="" />
            <div class="sa-symbol__status"></div>
        </div>
    </div>
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--sm
                sa-symbol--status--online
            "
        >
            <img src="" width="128" height="128" alt="" />
            <div class="sa-symbol__status"></div>
        </div>
    </div>
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--md
                sa-symbol--status--online
            "
        >
            <img src="" width="128" height="128" alt="" />
            <div class="sa-symbol__status"></div>
        </div>
    </div>
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--lg
                sa-symbol--status--online
            "
        >
            <img src="" width="128" height="128" alt="" />
            <div class="sa-symbol__status"></div>
        </div>
    </div>
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--xl
                sa-symbol--status--online
            "
        >
            <img src="" width="128" height="128" alt="" />
            <div class="sa-symbol__status"></div>
        </div>
    </div>
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--xxl
                sa-symbol--status--online
            "
        >
            <img src="" width="128" height="128" alt="" />
            <div class="sa-symbol__status"></div>
        </div>
    </div>
</div>

Shape #

The shape of the symbol is set using the .sa-symbol--shape--* modifier.

Example
<div class="row g-3 align-items-center">
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--size--lg">
            <img src="" width="128" height="128" alt="" />
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--size--lg sa-symbol--shape--rounded">
            <img src="" width="128" height="128" alt="" />
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--size--lg sa-symbol--shape--circle">
            <img src="" width="128" height="128" alt="" />
        </div>
    </div>
</div>

Icons #

Use the .sa-symbol__icon element to place the icon inside the symbol.

Example
<div class="row g-3 align-items-center">
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--xs">
            <div class="sa-symbol__icon"><i class="fas fa-bacterium"></i></div>
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--sm">
            <div class="sa-symbol__icon"><i class="fas fa-bacterium"></i></div>
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--md">
            <div class="sa-symbol__icon"><i class="fas fa-bacterium"></i></div>
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--lg">
            <div class="sa-symbol__icon"><i class="fas fa-bacterium"></i></div>
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--xl">
            <div class="sa-symbol__icon"><i class="fas fa-bacterium"></i></div>
        </div>
    </div>
    <div class="col-auto">
        <div class="sa-symbol sa-symbol--shape--circle sa-symbol--size--xxl">
            <div class="sa-symbol__icon"><i class="fas fa-bacterium"></i></div>
        </div>
    </div>
</div>

Styles #

The style of the symbol is set using the .sa-symbol--style--* modifier.

Example
GB
GB
GB
GB
GB
GB
GB
GB
GB
<div class="row g-3 align-items-center">
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--lg
                sa-symbol--style--theme
            "
        >
            <div class="sa-symbol__text">GB</div>
        </div>
    </div>
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--lg
                sa-symbol--style--primary
            "
        >
            <div class="sa-symbol__text">GB</div>
        </div>
    </div>
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--lg
                sa-symbol--style--secondary
            "
        >
            <div class="sa-symbol__text">GB</div>
        </div>
    </div>
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--lg
                sa-symbol--style--success
            "
        >
            <div class="sa-symbol__text">GB</div>
        </div>
    </div>
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--lg
                sa-symbol--style--danger
            "
        >
            <div class="sa-symbol__text">GB</div>
        </div>
    </div>
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--lg
                sa-symbol--style--warning
            "
        >
            <div class="sa-symbol__text">GB</div>
        </div>
    </div>
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--lg
                sa-symbol--style--info
            "
        >
            <div class="sa-symbol__text">GB</div>
        </div>
    </div>
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--lg
                sa-symbol--style--light
            "
        >
            <div class="sa-symbol__text">GB</div>
        </div>
    </div>
    <div class="col-auto">
        <div
            class="
                sa-symbol
                sa-symbol--shape--circle
                sa-symbol--size--lg
                sa-symbol--style--dark
            "
        >
            <div class="sa-symbol__text">GB</div>
        </div>
    </div>
</div>
Stroyka Admin — eCommerce Dashboard Template © 2021
Powered by HTML — Design by Kos