-
-
3
Notifications View
-
-
CartTotal : 4350.9
-
- 3
-
Wade Warren
UI Designer
Helper Classes
Styles in Borders
Use the different styles of borders likeborder radius/border-color/border-widthUse of any components.
Border radius class
Border color
Border-width
Text colors
Border and Displays
Use all direction.b-t-*/ .b-b-*/ .b-l-*/ .b-r-*border components.
Additive border
Subtractive border
Additive radius
Styles in Borders
Use the different styles of borders likeborder radius/border-color/border-width.Use of any components.
Dark background
Light backgrounds
Border color
Use all direction.b-t-*/ .b-b-*/ .b-l-*/ .b-r-*border components.
Images Sizes
Use the width and height of images class like:.img-* , .img-h-*.
Font Style
Use the 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
Font weight
Using, f-w-* class, you can change the font weight.
You can set bolder font weight Heading 1 using f-w-700
You can set bold font weight Heading 2 using f-w-600
You can set medium font weight Heading 3 using f-w-500
You can set normal font weight Heading 4 using f-w-400
You can set light font weight Heading 5 using f-w-300
You can set light font weight Heading 6 using f-w-100
Text Color
You can Give text color by using, font-*Class.
This is Primary text You can archive this adding.font-primary class
This is Secondary text You can archive this adding.font-secondary class
This is Tertiary text You can archive this adding.font-tertiary class
This is Success text You can archive this adding.font-success class
This is Info text You can archive this adding.font-info class
This is Warning text You can archive this adding.font-warning class
This is Danger text You can archive this adding.font-danger class
This is Dark text You can archive this adding.font-dark class
Font Size
Use the font-size for.f-* [14/16/18/20/22/24/26/28/30/32/34/36/38/40].