Utilities

VISPA-UI includes an expertly-crafted 13 Utilities which can make your UI building experience effortless.

Text Center

Centering a <div> can be a big hassle. Worry not we've got you covered with our Text Center utility class that is used to center any object/element in your UI. Just use the utility class of txt-center to the parent container. We use flexbox internally to center your elements effortlessly.

              
                
              
              
<div class="txt-center">
  <div></div>
</div>
            
          

Icon Colors

Hey don't get Shocked! Yes you heard that right, you can give colors to the icons now using VISPA-UI. We've got you seven themed icon colors that you can use to color your icons. Just use these utility classes on the icons and you're good to go.

Icon Primary

To make any icon Primary Colored in your project just add the class of icon-primary to the image/icon.

              
                
              
              
<img class="icon-primary" src="#" />
            
          

Icon Danger

To make any icon Danger Colored in your project just add the class of icon-danger to the image/icon.

              
                
              
              
<img class="icon-danger" src="#" />
            
          

Icon Success

To make any icon Success Colored in your project just add the class of icon-success to the image/icon.

              
                
              
              
<img class="icon-success" src="#" />
            
          

Icon Warning

To make any icon Warning Colored in your project just add the class of icon-warning to the image/icon.

              
                
              
              
<img class="icon-warning" src="#" />
            
          

Icon Dark

To make any icon Dark Colored in your project just add the class of icon-dark to the image/icon.

              
                
              
              
<img class="icon-dark" src="#" />
            
          

Icon Grey

To make any icon Grey Colored in your project just add the class of icon-grey to the image/icon.

              
                
              
              
<img class="icon-grey" src="#" />
            
          

Icon Light

To make any icon Light Colored in your project just add the class of icon-light to the image/icon.

              
                
              
              
<img class="icon-light" src="#" />
            
          

Icon Sizes

It can get quite messy resizing your icons! Now worry not, we've got you covered with our multiple icon size utility classes. We've got five ready to use icons sizes. Just use these utility classes on the icons and you're good to go.

eXtra Large

To make any icon eXtra Large in your project just add the class of icon-xl to the image/icon.

              
                
              
              
<img class="icon-xl" src="#" />
            
          

Large

To make any icon Large in your project just add the class of icon-lg to the image/icon.

              
                
              
              
<img class="icon-lg" src="#" />
            
          

Medium

To make any icon Medium in your project just add the class of icon-md to the image/icon.

              
                
              
              
<img class="icon-md" src="#" />
            
          

Small

To make any icon Small in your project just add the class of icon-sm to the image/icon.

              
                
              
              
<img class="icon-sm" src="#" />
            
          

eXtra Small

To make any icon eXtra Small in your project just add the class of icon-xs to the image/icon.

              
                
              
              
<img class="icon-xs" src="#" />