• Home
  • CSS Components

Theme CSS Components

CSS Components
Avatar

Classes to format your user images. You can combine avatar classes with padding utility class to give to the image a nice white border.

Image.avatar-xxl p-2
Image.avatar-xl p-2
Image.avatar-lg p-1
Image.avatar p-1
Image.avatar-sm p-1
Aspan.avatar p-1
Badges

Small count and labeling component.

Classic Badges
primarysecondarysuccesswarninginfodanger
Pill Badges
primarysecondarysuccesswarninginfodanger
Light Badges
primarysecondarysuccesswarninginfodanger
Notification Badges
10 5
Card Widget

Card widget, similar to Bootstrap's .card.

Show code sample


                                    <div class="col-lg-4">
                                      <div class="card-widget mb-4">
                                        <div class="card-widget-body">
                                          <div class="dot me-3 bg-indigo"></div>
                                          <div class="text">
                                            <h6 class="mb-0">Completed cases</h6><span class="text-gray-500">127 new cases</span>
                                          </div>
                                        </div>
                                        <div class="icon text-white bg-indigo"><i class="fas fa-clipboard-check"> </i></div>
                                      </div>
                                    </div>
Completed cases
127 new cases
New Quotes
214 new quotes
New clients
25 new clients
Icons - Bubbly

This theme also comes with a 150+ Premium SVG icons with appropriate license. No additional purchase is necessary.

For a complete icon reference, see here.

Icons - Font Awesome

Vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit.

These icons are mostly used in buttons or for social network links. For a complete icon reference, see here.

CSS Utilities
Background image

Utility class that turns a <img class="bg-image"> into a background image for its parent. Useful e.g. for carousels. Make sure that image's parent container and the content that should be placed over the image are relatively positioned.

I have a background image

Image overlay

Utility class that darkens or lightens the backround image of the element to enhance the legibility. It can be used with cards, carousel slides, etc.

Gradient overlay adds vertical gradient that's darkest on the bottom third of the element.

Dark overlay

Light overlay

Gradient Overlay

Class reference

.dark-overlay, .light-overlay, .gradient-overlay - CSS class to be used on the element

.overlay-content - use this class on the element's content to increase its Z-index and move it above the overlay layer

Responsive borders

Responsive borders as an addition to Bootstrap's border utilities.

Class reference

.border-sm, .border-md, etc.

Block utilities

Additional utility classes, for block elements mostly.

Class reference

.bg-gray-100 to .bg-gray-900 - grayscale backgrounds

.bg-primary-light, .bg-secondary-light - lighter backgrounds for the theme colours

.opacity-1 to .opacity-9 - opacity helper

.hover-scale - scale element on hover

.hover-animate - move element up by few pixels on hover

.hover-scale-bg-image - scale element's background picture on hover

Text utilities

Text utility classes to control text size and more.

Class reference

.text-gray-100 to .text-gray-900 - grayscale text colours

.text-sm, .text-lg, .text-xl - text sizes

.letter-spacing-1 to .letter-spacing-5 - letter spacing 0.1em to 0.5em

.z-index-1 to .z-index-5 - z-index from 10 to 50

.text-hover-primary, etc. - text colour on hover/focus for theme colours

.overflow-visible and .overflow-hidden - overflow control