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

              
               <!-- Headings -->
              <h1>This is H1 heading</h1>
              <h2>This is H2 heading</h2>
              <h3>This is H3 heading</h3>
              <h4>This is H4 heading</h4>
              <h5>This is H5 heading</h5>
              <h6>This is H6 heading</h6>

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

              
              <!-- Text Styles -->
                <p class="h1">This is a xlarge text</p>
                <p class="h2">This is a large text</p>
                <p class="h3">This is a medium text</p>
                <p>This is a default paragraph</p>
                <p><small>This is relatively &lt;small&gt; text.</small></p>
                <p><del>This line of text is meant to be treated as no longer accurate.</del></p>
                <p><strong>This line a bold line.</strong></p>
                <p class="colored-text">This line a colored line.</p>
                <p class="colored-text bg">This line a colored line with backgroud.</p>
                <p class="grey-text">This line is used in disabled container.</p>

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

              
               <!-- Text Positioning -->
              <p class="left-text">This is left aligned text</p>
              <p class="centered-text">This is center aligned text</p>
              <p class="right-text">This is right aligned text</p>
Previous