Inline Elements

Frontbx comes with a number of common inline utility elements pre-styled to help save you time coding.

Icon

Frontbx comes with a complete icon library thanks to IcoMoon. The library is free and comes with 675 individual icons.

To create an icon, use a <span> element with the class .glyph-icon in addition to .fa-[name] with the icon name as per IcoMoon documentation.

Icons can be sized using the .icon-xs, .icon-md, .icon-lg, .icon-xl, .icon-xxl modifier classes which are setup in scss/_config.scss.

<span class="fa fa-headphones icon-xs"></span>
<span class="fa fa-headphones icon-md"></span>
<span class="fa fa-headphones icon-lg"></span>
<span class="fa fa-headphones icon-xl"></span>
<span class="fa fa-headphones icon-xxl"></span>

The .fancy-link class creates a simple hover effect on any link.

Fancy Link   Fancy Link 
<a href="#" title="fancy" class="fancy-link">Fancy Link</a>

Badge

.badge can be used to display a digit of new or unread items to the user. For example how many unread notifications the user has.

Badges can be customized using Frontbx's contextual classes:

.badge-primary, .badge-secondary, .badge-info, .badge-success, .badge-warning, .badge-danger, .badge-white, .badge-black

.badge can be displayed in .btn by adding the .with-badge to class button.

9
4 
<div class="avatar">
    <img ... />
    <span class="badge badge-danger">9</span>
</div>
<button class="btn with-badge">
    Notifications
    <span class="badge badge-info">3</span>
</button>

You can customize the size or color of any badge using local CSS variables on .badge:

.my-badge
{
    --fbx-badge-size: 12px;
    --fbx-badge-color: var(--fbx-white);
    --fbx-badge-bg: var(--fbx-color-teal);
}

Status

Use the .status class to indicate a status:

.status can be customized using Frontbx's contextual classes:

.status-primary, .status-secondary, .status-info, .status-success, .status-warning, .status-danger, .status-white, .status-black

<div class="avatar">
    <img ... />
    <span class="status status-warning"></span>
</div>

You can customize the size or color of any status using local CSS variables on .status:

.my-status
{
    --fbx-status-size: 12px;
    --fbx-badge-color: var(--fbx-color-teal);
}

Label

.label can be used to emphasize content with text. There are two variants available - the standard label and .label-outline.

.label can be customized using Frontbx's contextual classes:

.label-primary, .label-secondary, .label-info, .label-success, .label-warning, .label-danger, .label-white, .label-black

NEW NEW NEW NEW NEW NEW
NEW NEW NEW NEW NEW NEW 
<span class="label label-primary">NEW</span>
<span class="label label-outline label-danger">NEW</span>

Loading

Frontbx comes with 5 basic loading animators. Use the base class .loader with .loader-[num]. Additionally loaders can be styled with Frontbx's context classes:

.loader-primary, .loader-secondary, .loader-info, .loader-success, .loader-warning, .loader-danger, .loader-white, .loader-black

    <span class="loader loader-1"></span>
    <span class="loader loader-2"></span>
    <span class="loader loader-3"></span>
    <span class="loader loader-4"></span>
    <span class="loader loader-5"></span>
    <span class="loader loader-1 loader-primary"></span>
    <span class="loader loader-2 loader-info"></span>
    <span class="loader loader-3 loader-success"></span>
    <span class="loader loader-4 loader-warning"></span>
    <span class="loader loader-5 loader-danger"></span>

Avatar

.avatar can be used to to create a simple circular image avatar, an icon or initials.

DT 
<div class="avatar">
    <img ... />
</div>
<div class="avatar">
    <span class="fa fa-heart3 color-danger"></span>
</div>
<div class="avatar">
    <span class="initials">DT</span>
</div>

Adjust sizing and backgrounds using the available sizing modifiers .avatar-xs .avatar-sm .avatar-md .avatar-lg .avatar-xl and contextual classes .avatar-primary, .avatar-secondary, .avatar-info, .avatar-success, .avatar-warning, .avatar-danger, .avatar-white, .avatar-black.

DT
DT 
<div class="avatar avatar-xs">
    <img ... />
</div>

<div class="avatar avatar-sm">
    <span class="fa fa-heart3 color-danger"></span>
</div>

<div class="avatar avatar-md">
    <span class="fa fa-heart3 color-danger"></span>
</div>

<div class="avatar avatar-lg">
    <span class="initials">DT</span>
</div>

<div class="avatar avatar-xl avatar-primary">
    <span class="initials">DT</span>
</div>

Caret

.caret can be used to show the user that a button or other content will either dropdown or dropup. You can use them wherever you like but here's an example in a button.

<button class="btn"> Button
    <span class="caret-s">
</button>
<button class="btn"> Button
    <span class="caret-n">
</button>