logologo

Typography

Headings

All HTML headings, H1 .. H6are available.

Code Font-Size Pixel Font Weight Heading
<h1></h1>

1.875rem

30px

500

Heading 1 (MEGA)
<h2></h2>

1.625rem

26px

500

Heading 2 (XL)
<h3></h3>

1.375rem

22px

400

Heading 3 (LARGE)
<h4></h4>

1.25rem

20px

600

Heading 4 (MEDIUM)
<h5></h5>
1rem
16px
400
Heading 5 (SMALL)
<h6></h6>
0.875rem
14px
400
Heading 6 (EXTRA SMALL)

Colored Headings

All HTML headings, H1 .. H6are available.

Code Heading
<h1></h1>

Heading 1 Sub Heading
<h2></h2>

Heading 1 Sub Heading
<h3></h3>

Heading 1 Sub Heading
<h4></h4>

Heading 1 Sub Heading
<h5></h5>
Heading 1 Sub Heading
<h6></h6>
Heading 1 Sub Heading

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

Listing typography

All typography list:- <ul>,<ol>,<dl>

Unorder list
  • One who looks on the bright side of things
  • One who does something not professionally but for pleasure
  • A handwriting that cannot be read
  • One who looks on the bright side of things
  • The study of ancient writing and scriptures
  • Creates more sophisticated capabilities for a web page to use coding language.
  • Maintaining contact and communicating clearly are also essential. possess abilities for a designer
Order list
  1. UI Kits
  2. Bonus Ui
  3. Animations
    1. Typography
    2. Avatars
    3. Grid
    4. Tag & pills
    5. Alert
  5. Dropdown
  6. Tabs
  7. Accordion
Description list
The way to get started is to quit talking and begin doing.
-Walt Disney
Life is what happens when you're busy making other plans.
-John Lennon
Whoever is happy will make others happy too.
-Anne Frank
Life is either a daring adventure or nothing at all.
-Helen Keller
The purpose of our lives is to be happy.
-Dalai Lama

Display Heading

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using adisplay heading- a larger, slightly more opinionated heading style.

Display 1

Display 2

Display 3

Display 4

Inline text elements

Styling for common inlineHTML 5elements.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

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

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

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

Blockquotes

The, <blockquote>tag specifies a section that is quoted from another source.

The only impossible journey is the one you never begin.

Tony Robbins

In this life we cannot do great things. We can only do small things with great love.

Mother Teresa

Live in the sunshine, swim the sea, drink the wild air.

Ralph Waldo Emerson