Utility Classes

VISPA-UI includes an expertly-crafted 28 Utility Classes which you can customize as per your projects requirements, which can make your UI building experience effortless.

Headings

VISPA-UI has 6 Headings which have the values as given below. To overwrite the Heading Classes just use the same name and overwrite the properties as per your requirements in your CSS file. Easy right? So, what are you waiting for? Go now and customize the Headings.

              
                
              
              
.h-1 {
  font-size: 9.6rem;
  font-weight: 900;
}

.h-2 {
  font-size: 6rem;
  font-weight: 900;
}

.h-3 {
  font-size: 4.8rem;
  font-weight: 700;
}

.h-4 {
  font-size: 3.4rem;
  font-weight: 700;
}

.h-5 {
  font-size: 2.4rem;
  font-weight: 600;
}

.h-6 {
  font-size: 2rem;
  font-weight: 600;
}
            
          

Body Fonts

VISPA-UI has 6 Body Fonts which have the values as given below. To overwrite the Body Font Classes just use the same name and overwrite the properties as per your requirements in your CSS file. Easy right? So, what are you waiting for? Go now and customize the Body Fonts.

              
                
              
              
.bd-1 {
  font-size: 6rem;
  font-weight: 400;
}

.bd-2 {
  font-size: 4.8rem;
  font-weight: 400;
}

.bd-3 {
  font-size: 3.4rem;
  font-weight: 400;
}

.bd-4 {
  font-size: 2.4rem;
  font-weight: 400;
}

.bd-5 {
  font-size: 1.6rem;
  font-weight: 300;
}

.bd-6 {
  font-size: 0.8rem;
  font-weight: 300;
}
            
          

Subtitles

VISPA-UI has 2 Subtitles which have the values as given below. To overwrite the Sub-title Classes just use the same name and overwrite the properties as per your requirements in your CSS file. Easy right? So, what are you waiting for? Go now and customize the Sub-titles.

              
                
              
              
.st-1 {
  font-size: 1.6rem;
  font-weight: 700;
}

.st-2 {
  font-size: 1.4rem;
  font-weight: 700;
}
            
          

Caption

VISPA-UI has Caption which have the values as given below. To overwrite the Caption Class just use the same name and overwrite the properties as per your requirements in your CSS file. Easy right? So, what are you waiting for? Go now and customize the Caption.

              
                
              
              
.cp {
  color: #818181;
  font-size: 1.2rem;
  font-weight: 300;
}
            
          

Text Center

VISPA-UI has Text Center utility class which have the values as given below. To overwrite the Text-center Class just use the same name and overwrite the properties as per your requirements in your CSS file. Easy right? So, what are you waiting for? Go now and customize the Text-center.

              
                
              
              
.txt-center {
  align-items: center;
  display: flex;
  justify-content: center;
}
            
          

Icon Sizes

VISPA-UI has Icon Sizes utility classes which have the values as given below. To overwrite the Icon Sizes Classes just use the same name and overwrite the properties as per your requirements in your CSS file. Easy right? So, what are you waiting for? Go now and customize the Icon-sizes.

              
                
              
              
.icon-xs {
  height: 12px;
  width: 12px;
}

.icon-sm {
  height: 15px;
  width: 15px;
}

.icon-md {
  height: 20px;
  width: 20px;
}

.icon-lg {
  height: 25px;
  width: 25px;
}

.icon-xl {
  height: 35px;
  width: 35px;
}