CSS Components

Avatar

Component to display your user image. You can use props .avatar-xxl p-2Classes to format your user images. You can combine avatar classes with padding utility class to give to the image a nice white border.

Supported props for Avatar component:
  • className - classes for Avatar element
  • size - avatar size xxl, xl, lg, sm. Leave empty for default size.
  • image - image url
  • alt - image alt
  • border - if true, border will be shown around avatar.
Image
<Avatar
  image="/img/avatar-0.jpg"
  alt="Image"
  className="mb-3"
  size="xxl"
  border
/>
Badges

Small count and labeling component.

Classic Badges
primarysecondarysuccesswarninginfodanger
Pill Badges
primarysecondarysuccesswarninginfodanger
Light Badges
primarysecondarysuccesswarninginfodanger
Notification Badges
105
Pill component

Pill component, similar to Bootstrap's .card.

import { faUserFriends } from "@fortawesome/free-solid-svg-icons" 
import Pill from "../../components/Pill"

export default function page(props) {
  return (
    <Pill
      data={{
        name: "New clients",
        content: "25 new clients",
      }}
      color="blue"
      icon={faUserFriends}
      className="mb-4"
    />
  )
}
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.

You can use new Icon component to conveniently display icons.

<Icon icon="smartphone-1" className="w-3rem h-3rem mb-5 svg-icon-light" />

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.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAddressBook } from '@fortawesome/free-solid-svg-icons'

export default function IconsFontAwesome() {
    return (
        <FontAwesomeIcon icon={faAddressBook} />
    )
}
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

Your company © 2023

Version 1.3.0