Components

Typography

Use typography to present your design and content as clearly and efficiently as possible.

Headings

Headings can be created by using <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags.

This is H1 heading

This is H2 heading

This is H3 heading

This is H4 heading

This is H5 heading
This is H6 heading

Code Snippets

              
               
              
This is H1 heading

              
This is H2 heading

              
This is H3 heading

              
This is H4 heading

              
This is H5 heading

              
This is H6 heading

Text Styles

  • For extra large text use h1 class.
  • For large text use h2 class.
  • For medium text use h3 class.
  • For small text use <small> tag.
  • For line-through text use <del> tag.
  • For bold text use <strong> tag.
  • For colored text use colored-text class.
  • For colored text with background use colored-text bg class.
  • For grey colored/disabled text use grey-text class.

This is a xlarge text

This is a large text

This is a medium text

This is a default paragraph

This is relatively <small> text.

This line of text is meant to be treated as no longer accurate.

This line a bold line.

This line a colored line.

This line a colored line with backgroud.

This line is used in disabled container.

Code Snippets

              
              
                
This is a xlarge text

                
This is a large text

                
This is a medium text

                
This is a default paragraph

                
This is relatively <small> text.

                
This line of text is meant to be treated as no longer accurate.

                
This line a bold line.

                
This line a colored line.

                
This line a colored line with backgroud.

                
This line is used in disabled container.

Text Positioning

  • For left aligned text use left-text class.
  • For centered aligned text use centered-text class.
  • For right aligned text use right-text class.

This is left aligned text

This is center aligned text

This is right aligned text

Code Snippets

              
               
              
This is left aligned text

              
This is center aligned text

              
This is right aligned text
Previous