Helper Classes | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Helper Classes

##### Styled Borders

Use different styles of borders, like `border radius, border-color, and border-width` use of any components.

###### Custom Border-radius Class

rounded-none
rounded-[1px]
rounded-[2px]
rounded-[3px]
rounded-[4px]
rounded-[5px]
rounded-[6px]
rounded-[7px]
rounded-[8px]
rounded-[9px]
rounded-[10px]

###### Border Color

border-primary
border-secondary
border-success
border-danger
border-warning
border-info
border-dark

###### Border Width

border-1
border-2
border-3
border-4
border-5
border-6
border-7
border-8
border-9
border-10

###### Text Colors

C
txt-primary
C
txt-secondary
C
txt-success
C
txt-danger
C
txt-warning
C
txt-info
C
txt-dark
C
txt-light

    <div class="grid grid-cols-12 gap-3">
     <div class="col-span-6 xxl:col-span-6 sm:col-span-12">
       <div class="border-wrapper h-full alert-light-light dark-helper">
         <h6 class="mb-3">Custom Border-radius Class</h6>
         <div class="helper-common-box">
           <div class="helper-box b-r-0 bg-light border"></div><span>b-r-0</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-1 bg-light border"></div><span>b-r-1</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-2 bg-light border"></div><span>b-r-2</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-3 bg-light border"></div><span>b-r-3</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-4 bg-light border"></div><span>b-r-4</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-5 bg-light border"></div><span>b-r-5</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-6 bg-light border"></div><span>b-r-6</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-7 bg-light border"></div><span>b-r-7</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-8 bg-light border"></div><span>b-r-8</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-9 bg-light border"></div><span>b-r-9</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-10 bg-light border"></div><span>b-r-10</span>
         </div>
       </div>
     </div>
     <div class="col-span-6 xxl:col-span-6 sm:col-span-12">
       <div class="border-wrapper h-full alert-light-light dark-helper">
         <h6 class="mb-3">Border Color</h6>
         <div class="helper-common-box">
           <div class="helper-box border-primary border"></div><span>border-primary</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-secondary border"></div><span>border-secondary</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-success border"></div><span>border-success</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-danger border"></div><span>border-danger</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-warning border"></div><span>border-warning</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-info border"></div><span>border-info</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-dark border"></div><span>border-dark</span>
         </div>
       </div>
     </div>
     <div class="col-span-6 xxl:col-span-6 sm:col-span-12">
       <div class="border-wrapper h-full alert-light-light dark-helper">
         <h6 class="mb-3">Border Width</h6>
         <div class="helper-common-box">
           <div class="helper-box border-1 border"> </div><span>border-1</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-2 border"> </div><span>border-2</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-3 border"> </div><span>border-3</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-4 border"> </div><span>border-4</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-5 border"> </div><span>border-5</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-6 border"> </div><span>border-6</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-7 border"> </div><span>border-7</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-8 border"> </div><span>border-8</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-9 border"> </div><span>border-9</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-10 border"> </div><span>border-10</span>
         </div>
       </div>
     </div>
     <div class="col-span-6 xxl:col-span-6 sm:col-span-12">
       <div class="border-wrapper alert-light-light h-full dark-helper">
         <h6 class="mb-3">Text Colors</h6>
         <div class="helper-common-box">
           <div class="helper-box helper-text border txt-primary">C </div><span>txt-primary</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box helper-text border txt-secondary">C </div><span>txt-secondary</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box helper-text border txt-success">C </div><span>txt-success</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box helper-text border txt-danger">C </div><span>txt-danger</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box helper-text border txt-warning">C </div><span>txt-warning</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box helper-text border txt-info">C </div><span>txt-info</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box helper-text border txt-dark">C </div><span>txt-dark</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box helper-text border txt-light bg-dark">C </div><span>txt-light</span>
         </div>
       </div>
     </div>
    </div>

##### Variation of Borders and Displays

Use border utilities to add or remove an element's borders.

###### Additive Border

border
border-top
border-bottom
border-left
border-right

###### Subtractive Border

border-0
border-t-0
border-e-0
border-b-0
border-s-0

###### Additive Radius

rounded
rounded-top
rounded-end
rounded-bottom
rounded-start
rounded-full
rounded-full
rounded-0

     <div class="grid grid-cols-12 gap-3">
     <div class="col-span-4 xl:col-span-6 sm:col-span-12">
       <div class="border-wrapper h-full border">
         <h6 class="mb-3">Additive Border</h6>
         <div class="helper-common-box">
           <div class="helper-box bg-light border"></div><span>border</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light border-top"></div><span>border-top</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light border-bottom"></div><span>border-bottom</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light border-start"></div><span>border-start</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light border-end"></div><span>border-end</span>
         </div>
       </div>
     </div>
     <div class="col-span-4 xl:col-span-6 sm:col-span-12">
       <div class="border-wrapper h-full border">
         <h6 class="mb-3">Subtractive Border</h6>
         <div class="helper-common-box">
           <div class="helper-box bg-light border border-0"> </div><span>border-0</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light border border-top-0"> </div><span>border-top-0</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light border border-end-0"> </div><span>border-end-0</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light border border-bottom-0"> </div><span>border-bottom-0</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light border border-start-0"> </div><span>border-start-0</span>
         </div>
       </div>
     </div>
     <div class="col-xl-4 col-sm-12">
       <div class="border-wrapper h-full border">
         <h6 class="mb-3">Additive Radius</h6>
         <div class="helper-common-box">
           <div class="helper-radius radius-wrapper rounded"></div><span>rounded</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-radius radius-wrapper rounded-top"></div><span>rounded-top</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-radius radius-wrapper rounded-end"></div><span>rounded-end</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-radius radius-wrapper rounded-bottom"></div><span>rounded-bottom</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-radius radius-wrapper rounded-start"></div><span>rounded-start</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-radius radius-wrapper rounded-full"></div><span>rounded-full</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-radius radius-wrapper rounded-full"></div><span>rounded-full</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-radius radius-wrapper rounded-0"></div><span>rounded-0</span>
         </div>
       </div>
     </div>
    </div>

##### Background Colors

Use any component in a theme, use the colors `bg-*` and `alert-light-*.`

###### Dark Backgrounds

bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-dark
bg-light

###### Light Backgrounds

alert-light-primary
alert-light-secondary
alert-light-success
alert-light-danger
alert-light-warning
alert-light-info
alert-light-dark
alert-light-light

###### Extended Background Colors

light-card
light-background

     <div class="grid grid-cols-12 gap-3">
     <div class="col-span-4 xl:col-span-6 sm:col-span-12">
       <div class="border-wrapper h-full border">
         <h6 class="mb-3">Dark Backgrounds</h6>
         <div class="helper-common-box">
           <div class="helper-box bg-primary"></div><span>bg-primary</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-secondary"></div><span>bg-secondary</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-success"></div><span>bg-success</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-danger"></div><span>bg-danger</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-warning"></div><span>bg-warning</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-info"></div><span>bg-info</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-dark"></div><span>bg-dark</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light"></div><span>bg-light</span>
         </div>
       </div>
     </div>
     <div class="col-span-4 xl:col-span-6 sm:col-span-12">
       <div class="border-wrapper h-full border">
         <h6 class="mb-3">Light Backgrounds</h6>
         <div class="helper-common-box">
           <div class="helper-box alert-light-primary"> </div><span>alert-light-primary</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box alert-light-secondary"></div><span>alert-light-secondary</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box alert-light-success"></div><span>alert-light-success</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box alert-light-danger"></div><span>alert-light-danger</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box alert-light-warning"></div><span>alert-light-warning</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box alert-light-info"></div><span>alert-light-info</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box alert-light-dark"></div><span>alert-light-dark</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box alert-light-light"></div><span>alert-light-light</span>
         </div>
       </div>
     </div>
     <div class="col-xl-4 col-sm-12">
       <div class="border-wrapper h-full border">
         <h6 class="mb-3">Extended Background Colors</h6>
         <div class="helper-common-box">
           <div class="helper-box light-card"> </div><span>light-card</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box light-background border"></div><span>light-background</span>
         </div>
       </div>
     </div>
    </div>

##### Border Colors

Use `b-*/ b-t-*/ b-b-*/ b-l-*/ b-r-*` class for borders.

b-primary
b-t-primary
b-b-primary
b-l-primary
b-r-primary
b-secondary
b-t-secondary
b-b-secondary
b-l-secondary
b-r-secondary
b-success
b-t-success
b-b-success
b-l-success
b-r-success
b-danger
b-t-danger
b-b-danger
b-l-danger
b-r-danger
b-warning
b-t-warning
b-b-warning
b-l-warning
b-r-warning
b-info
b-t-info
b-b-info
b-l-info
b-r-info
b-dark
b-t-dark
b-b-dark
b-l-dark
b-r-dark
b-light
b-t-light
b-b-light
b-l-light
b-r-light

    <div class="gradient-border">
     <div class="helper-common-box">
       <div class="helper-box b-primary custom-border fill-wrapper"> </div><span>b-primary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-t-primary custom-border fill-wrapper"> </div><span>b-t-primary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-b-primary custom-border fill-wrapper"> </div><span>b-b-primary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-l-primary custom-border fill-wrapper"> </div><span>b-l-primary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-r-primary custom-border fill-wrapper"> </div><span>b-r-primary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-secondary custom-border fill-wrapper"> </div><span>b-secondary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-t-secondary custom-border fill-wrapper"> </div><span>b-t-secondary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-b-secondary custom-border fill-wrapper"> </div><span>b-b-secondary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-l-secondary custom-border fill-wrapper"> </div><span>b-l-secondary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-r-secondary custom-border fill-wrapper"> </div><span>b-r-secondary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-success custom-border fill-wrapper"> </div><span>b-success</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-t-success custom-border fill-wrapper"> </div><span>b-t-success</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-b-success custom-border fill-wrapper"> </div><span>b-b-success</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-l-success custom-border fill-wrapper"> </div><span>b-l-success</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-r-success custom-border fill-wrapper"> </div><span>b-r-success</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-danger custom-border fill-wrapper"> </div><span>b-danger</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-t-danger custom-border fill-wrapper"> </div><span>b-t-danger</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-b-danger custom-border fill-wrapper"> </div><span>b-b-danger</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-l-danger custom-border fill-wrapper"> </div><span>b-l-danger</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-r-danger custom-border fill-wrapper"> </div><span>b-r-danger</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-warning custom-border fill-wrapper"> </div><span>b-warning</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-t-warning custom-border fill-wrapper"> </div><span>b-t-warning</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-b-warning custom-border fill-wrapper"> </div><span>b-b-warning</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-l-warning custom-border fill-wrapper"> </div><span>b-l-warning</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-r-warning custom-border fill-wrapper"> </div><span>b-r-warning</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-info custom-border fill-wrapper"> </div><span>b-info</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-t-info custom-border fill-wrapper"> </div><span>b-t-info</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-b-info custom-border fill-wrapper"> </div><span>b-b-info</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-l-info custom-border fill-wrapper"> </div><span>b-l-info</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-r-info custom-border fill-wrapper"> </div><span>b-r-info</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-dark custom-border fill-wrapper"> </div><span>b-dark</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-t-dark custom-border fill-wrapper"> </div><span>b-t-dark</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-b-dark custom-border fill-wrapper"> </div><span>b-b-dark</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-l-dark custom-border fill-wrapper"> </div><span>b-l-dark</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-r-dark custom-border fill-wrapper"> </div><span>b-r-dark</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-light custom-border fill-wrapper"> </div><span>b-light</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-t-light custom-border fill-wrapper"> </div><span>b-t-light</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-b-light custom-border fill-wrapper"> </div><span>b-b-light</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-l-light custom-border fill-wrapper"> </div><span>b-l-light</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-r-light custom-border fill-wrapper"> </div><span>b-r-light</span>
     </div>
    </div>

##### Images Sizes

Use `img-h-*` & `img-*` for image height and border radius for use `rounded-* / b-r-* / and rounded-full` for border-radius images.

    <div class="grid grid-cols-12 gap-3">
     <div class="colspan-12 helper-col-6">
       <div class="card-wrapper border rounded-3 h-full">
         <div class="gradient-border gap-3">
           <img class="img-30 img-h-30" src="../assets/images/blog/comment.jpg" alt="img-size-30">
           <img class="img-40 img-h-40" src="../assets/images/blog/comment.jpg" alt="img-size-40">
           <img class="img-50 img-h-50" src="../assets/images/blog/comment.jpg" alt="img-size-50">
           <img class="img-60 img-h-60" src="../assets/images/blog/comment.jpg" alt="img-size-60">
           <img class="img-70 img-h-70" src="../assets/images/blog/comment.jpg" alt="img-size-70">
           <img class="img-80 img-h-80" src="../assets/images/blog/comment.jpg" alt="img-size-80">
           <img class="img-90 img-h-90" src="../assets/images/blog/comment.jpg" alt="img-size-90">
           <img class="img-100 img-h-full" src="../assets/images/blog/comment.jpg" alt="img-size-100">
         </div>
       </div>
     </div>
     <div class="colspan-12 helper-col-6">
       <div class="card-wrapper border rounded-3 h-full">
         <div class="gradient-border gap-3">
           <img class="img-30 img-h-30 b-r-4" src="../assets/images/blog/comment.jpg" alt="img-size-30">
           <img class="img-40 img-h-40 rounded" src="../assets/images/blog/comment.jpg" alt="img-size-40">
           <img class="img-50 img-h-50 rounded-1" src="../assets/images/blog/comment.jpg" alt="img-size-50">
           <img class="img-60 img-h-60 rounded-2" src="../assets/images/blog/comment.jpg" alt="img-size-60">
           <img class="img-70 img-h-70 rounded-3" src="../assets/images/blog/comment.jpg" alt="img-size-70">
           <img class="img-80 img-h-80 rounded-4" src="../assets/images/blog/comment.jpg" alt="img-size-80">
           <img class="img-90 img-h-90 rounded-5" src="../assets/images/blog/comment.jpg" alt="img-size-90">
           <img class="img-100 img-h-full rounded-full" src="../assets/images/blog/comment.jpg" alt="img-size-100">
         </div>
       </div>
     </div>
    </div>

##### Font-style

Use font-style like: `f-s-* [normal / italic / oblique / initial / inherit]`.

This is a f-s-normal font-style

This is a f-s-italic font-style

This is a f-s-oblique font-style

This is a f-s-initial font-style

This is a f-s-inherit font-style

    <div class="card-body">
     <p class="f-s-normal">This is a<strong>f-s-normal</strong>font-style</p>
     <p class="f-s-italic">This is a<strong>f-s-italic</strong>font-style</p>
     <p class="f-s-oblique">This is a<strong>f-s-oblique</strong>font-style</p>
     <p class="f-s-initial">This is a<strong>f-s-initial</strong>font-style</p>
     <p class="f-s-inherit">This is a<strong>f-s-inherit</strong>font-style</p>
    </div>

##### Font Weight

Use font-weight classes like: `f-w-* [100 / 300 / 400 / 600 / 700 / 900]`.

You can set light font weight heading f-w-100
You can set light font weight heading font-light
You can set light font weight heading font-normal
You can set bolder font weight heading font-semibold
You can set bold font weight heading font-bold
You can set bold font weight heading font-black

    <div class="card-body">
     <div class="helper-common-box">
       <div class="f-w-100">You can set light font weight heading f-w-100</div>
     </div>
     <div class="helper-common-box">
       <div class="font-light">You can set light font weight heading font-light</div>
     </div>
     <div class="helper-common-box">
       <div class="font-normal">You can set light font weight heading font-normal</div>
     </div>
     <div class="helper-common-box">
       <div class="font-semibold">You can set bolder font weight heading font-semibold</div>
     </div>
     <div class="helper-common-box">
       <div class="font-bold">You can set bold font weight heading font-bold</div>
     </div>
     <div class="helper-common-box">
       <div class="font-black">You can set bold font weight heading font-black</div>
     </div>
    </div>

##### Text Colors

Use text color for `font-*` classes.

This is a font-primary text used class as font-primary
This is a font-secondary text used class as font-secondary
This is a font-success text used class as font-success
This is a font-danger text used class as font-danger
This is a font-warning text used class as font-warning
This is a font-info text used class as font-info
This is a font-dark text used class as font-dark

    <div class="card-body txt-space">
     <div class="font-primary">This is a<strong>font-primary</strong>text used class as font-primary</div>
     <div class="font-secondary">This is a<strong>font-secondary</strong>text used class as font-secondary </div>
     <div class="font-success">This is a<strong>font-success</strong>text used class as font-success</div>
     <div class="font-danger">This is a<strong>font-danger</strong>text used class as font-danger</div>
     <div class="font-warning">This is a<strong>font-warning</strong>text used class as font-warning</div>
     <div class="font-info">This is a<strong>font-info</strong>text used class as font-info</div>
     <div class="font-dark">This is a<strong>font-dark</strong>text used class as font-dark</div>
    </div>

##### Padding

Use padding classes like: `p-* [10 / 15 / 20 / 25 / 30 / 35 / 40/ 45 / 50]`.

p-10
p-15
p-20
p-25
p-30
p-35
p-40
p-45
p-50

    <div class="border-wrapper h-full alert-light-light dark-helper">
     <div class="helper-common-box helper-p-wrapper">
       <div class="helper-p-box p-10 bg-light border"><span>p-10</span></div>
       <div class="helper-p-box p-15 bg-light border"><span>p-15</span></div>
       <div class="helper-p-box p-5 bg-light border"><span>p-5</span></div>
       <div class="helper-p-box p-25 bg-light border"><span>p-25</span></div>
       <div class="helper-p-box p-30 bg-light border"><span>p-30</span></div>
       <div class="helper-p-box p-35 bg-light border"><span>p-35</span></div>
       <div class="helper-p-box p-40 bg-light border"><span>p-40</span></div>
       <div class="helper-p-box p-45 bg-light border"><span>p-45</span></div>
       <div class="helper-p-box p-50 bg-light border"><span>p-50</span></div>
     </div>
    </div>

##### Dashed Border

Use`b-width-*` and `border-s-dashed` to dashed border.

b-width-1
b-width-2
b-width-3

    <div class="helper-common-box helper-p-wrapper">
     <div class="border-common-box border-s-dashed b-width-1">b-width-1</div>
     <div class="border-common-box border-s-dashed b-width-2">b-width-2</div>
     <div class="border-common-box border-s-dashed b-width-3">b-width-3</div>
    </div>

##### Dotted Border

Use the`b-width-*` and `border-s-dotted` to dotted border.

b-width-1
b-width-2
b-width-3

    <div class="helper-common-box helper-p-wrapper">
     <div class="border-common-box border-s-dotted b-width-1">b-width-1</div>
     <div class="border-common-box border-s-dotted b-width-2">b-width-2</div>
     <div class="border-common-box border-s-dotted b-width-3">b-width-3</div>
    </div>

##### Groove Border

Use the`b-width-*` and `border-s-groove` to groove border.

b-width-1
b-width-2
b-width-3

    <div class="helper-common-box helper-p-wrapper">
     <div class="border-common-box border-s-groove b-width-1">b-width-1</div>
     <div class="border-common-box border-s-groove b-width-2">b-width-2</div>
     <div class="border-common-box border-s-groove b-width-3">b-width-3</div>
    </div>

##### Ridge Border

Use the`b-width-*` and `border-s-inset` to ridge border.

b-width-1
b-width-2
b-width-3

    <div class="helper-common-box helper-p-wrapper">
     <div class="border-common-box border-s-inset b-width-1">b-width-1</div>
     <div class="border-common-box border-s-inset b-width-2">b-width-2</div>
     <div class="border-common-box border-s-inset b-width-3">b-width-3</div>
    </div>

##### Only One Side Padding

Use padding classes like: `p-l-* / p-r-* / p-t-* / p-b-*`.

###### Padding Left

pl-10pl-15pl-20pl-25pl-30pl-35pl-40pl-45pl-50

###### Padding Right

pr-10pr-15pr-20pr-25pr-30pr-35pr-40pr-45pr-50

###### Padding Top

pt-10pt-15pt-20pt-25pt-30pt-35pt-40pt-45pt-50

###### Padding Bottom

pb-10pb-15pb-20pb-25pb-30pb-35pb-40pb-45pb-50

    <div class="grid grid-cols-12 gap-3">
     <div class="col-span-6 xxl:col-span-6 sm:col-span-12">
       <div class="border-wrapper h-full alert-light-light dark-helper">
         <h6 class="mb-3">Padding Left</h6>
         <div class="common-p-box">
           <span>p-l-10</span>
           <span>p-l-15</span>
           <span>p-l-20</span>
           <span>p-l-25</span>
           <span>p-l-30</span>
           <span>p-l-35</span>
           <span>p-l-40</span>
           <span>p-l-45</span>
           <span>p-l-50</span>
         </div>
       </div>
     </div>
     <div class="col-span-6 xxl:col-span-6 sm:col-span-12">
       <div class="border-wrapper h-full alert-light-light dark-helper">
         <h6 class="mb-3">Padding Right</h6>
         <div class="common-p-box">
           <span>p-r-10</span>
           <span>p-r-15</span>
           <span>p-r-20</span>
           <span>p-r-25</span>
           <span>p-r-30</span>
           <span>p-r-35</span>
           <span>p-r-40</span>
           <span>p-r-45</span>
           <span>p-r-50</span>
         </div>
       </div>
     </div>
     <div class="col-span-6 xxl:col-span-6 sm:col-span-12">
       <div class="border-wrapper h-full alert-light-light dark-helper">
         <h6 class="mb-3">Padding Top</h6>
         <div class="common-p-box">
           <span>p-t-10</span>
           <span>p-t-15</span>
           <span>p-t-20</span>
           <span>p-t-25</span>
           <span>p-t-30</span>
           <span>p-t-35</span>
           <span>p-t-40</span>
           <span>p-t-45</span>
           <span>p-t-50</span>
         </div>
       </div>
     </div>
     <div class="col-span-6 xxl:col-span-6 sm:col-span-12">
       <div class="border-wrapper h-full alert-light-light dark-helper">
         <h6 class="mb-3">Padding Bottom</h6>
         <div class="common-p-box">
           <span>p-b-10</span>
           <span>p-b-15</span>
           <span>p-b-20</span>
           <span>p-b-25</span>
           <span>p-b-30</span>
           <span>p-b-35</span>
           <span>p-b-40</span>
           <span>p-b-45</span>
           <span>p-b-50</span>
         </div>
       </div>
     </div>
    </div>

##### Margins

Use margin classes like: `m-* [10 / 15 / 20 / 25 / 30 / 35 / 40 / 45 / 50]`.

m-10
m-15
m-20
m-25
m-30
m-35
m-40
m-45
m-50

    <div class="gradient-border">
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-10 border bg-light"></div>
       <span>m-10</span>
     </div>
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-15 border bg-light"></div>
       <span>m-15</span>
     </div>
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-20 border bg-light"></div>
       <span>m-20</span>
     </div>
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-25 border bg-light"></div>
       <span>m-25</span>
     </div>
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-30 border bg-light"></div>
       <span>m-30</span>
     </div>
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-35 border bg-light"></div>
       <span>m-35</span>
     </div>
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-40 border bg-light"></div>
       <span>m-40</span>
     </div>
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-45 border bg-light"></div>
       <span>m-45</span>
     </div>
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-50 border bg-light"></div>
       <span>m-50</span>
     </div>
    </div>

##### Just One Side Margin

Use all around margin classes like: `m-l-* / m-r-* / m-t-* / m-b-*`.

###### Margin Left

ml-10ml-15ml-20ml-25ml-30ml-35ml-40ml-45ml-50

###### Margin Right

mr-10mr-15mr-20mr-25mr-30mr-35mr-40mr-45mr-50

###### Margin Top

mt-10mt-15mt-20mt-25mt-30mt-35mt-40mt-45mt-50

###### Margin Bottom

mb-10mb-15mb-20mb-25mb-30mb-35mb-40mb-45mb-50

     <div class="grid grid-cols-12 card-gap">
     <div class="col-span-6 xxl:col-span-6 sm:col-span-12">
       <div class="border-wrapper h-full alert-light-light dark-helper">
         <h6 class="mb-3">Margin Left</h6>
         <div class="common-p-box">
           <span>m-l-10</span>
           <span>m-l-15</span>
           <span>m-l-20</span>
           <span>m-l-25</span>
           <span>m-l-30</span>
           <span>m-l-35</span>
           <span>m-l-40</span>
           <span>m-l-45</span>
           <span>m-l-50</span>
         </div>
       </div>
     </div>
     <div class="col-span-6 xxl:col-span-6 sm:col-span-12">
       <div class="border-wrapper h-full alert-light-light dark-helper">
         <h6 class="mb-3">Margin Right</h6>
         <div class="common-p-box">
           <span>m-r-10</span>
           <span>m-r-15</span>
           <span>m-r-20</span>
           <span>m-r-25</span>
           <span>m-r-30</span>
           <span>m-r-35</span>
           <span>m-r-40</span>
           <span>m-r-45</span>
           <span>m-r-50</span>
         </div>
       </div>
     </div>
     <div class="col-span-6 xxl:col-span-6 sm:col-span-12">
       <div class="border-wrapper h-full alert-light-light dark-helper">
         <h6 class="mb-3">Margin Top</h6>
         <div class="common-p-box">
           <span>m-t-10</span>
           <span>m-t-15</span>
           <span>m-t-20</span>
           <span>m-t-25</span>
           <span>m-t-30</span>
           <span>m-t-35</span>
           <span>m-t-40</span>
           <span>m-t-45</span>
           <span>m-t-50</span>
         </div>
       </div>
     </div>
     <div class="col-span-6 xxl:col-span-6 sm:col-span-12">
       <div class="border-wrapper h-full alert-light-light dark-helper">
         <h6 class="mb-3">Margin Bottom</h6>
         <div class="common-p-box">
           <span>m-b-10</span>
           <span>m-b-15</span>
           <span>m-b-20</span>
           <span>m-b-25</span>
           <span>m-b-30</span>
           <span>m-b-35</span>
           <span>m-b-40</span>
           <span>m-b-45</span>
           <span>m-b-50</span>
         </div>
       </div>
     </div>
    </div>

##### Font Sizes

Use font-size for `f-* [14 / 16 / 18 / 20 / 22 / 24 / 26 / 28 / 30 / 32 / 34 / 36 / 38 / 40]`.

Font-size f-14
Font-size f-16
Font-size f-18
Font-size f-20
Font-size f-22
Font-size f-24
Font-size f-26
Font-size f-28
Font-size f-30
Font-size f-32
Font-size f-34
Font-size f-36
Font-size f-38
Font-size f-40

    <div class="gradient-border">
     <div class="font-wrapper border">
       <div class="f-14">Font-size f-14</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-16">Font-size f-16</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-18">Font-size f-18</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-20">Font-size f-20</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-22">Font-size f-22</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-24">Font-size f-24</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-26">Font-size f-26</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-28">Font-size f-28</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-30">Font-size f-30</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-32">Font-size f-32</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-34">Font-size f-34</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-36">Font-size f-36</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-38">Font-size f-38</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-40">Font-size f-40</div>
     </div>
    </div>