Typography
Headings Use tags h1 to h6 for get desire heading.

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading
Heading with subtitle Use tags h1 to h6 for get desire heading.

h1. Heading Sub-heading

h2. Heading Sub-heading

h3. Heading Sub-heading

h4. Heading Sub-heading

h5. Heading Sub-heading
h6. Heading Sub-heading
Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla enim nisl, accumsan sit amet libero ut, aliquet efficitur lectus. Quisque at gravida lorem. Ut tristique luctus ante, ut tempus eros vehicula sed. Nullam hendrerit est massa, vitae lacinia metus mollis condimentum. Suspendisse pharetra eros massa, eu malesuada ligula malesuada non. Nulla sagittis sapien id condimentum consectetur. Donec lacus sapien, mattis in condimentum quis, faucibus in massa. Nunc sit amet placerat metus.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla enim nisl, accumsan sit amet libero ut, aliquet efficitur lectus. Quisque at gravida lorem. Ut tristique luctus ante, ut tempus eros vehicula sed. Nullam hendrerit est massa, vitae lacinia metus mollis condimentum. Suspendisse pharetra eros massa, eu malesuada ligula malesuada non. Nulla sagittis sapien id condimentum consectetur. Donec lacus sapien, mattis in condimentum quis, faucibus in massa. Nunc sit amet placerat metus.

Nulla enim nisl, accumsan sit amet libero ut
Font Weights Use class: .font-lighter , .font-normal , .font-bold

Font Lighter.

Font Normal

Font Bold

Font Sizes Multiplies of 8, max: 50. Use class: .f-s-8 ... .f-s-50

font-size:15px

font-size:20px

font-size:30px

...

font-size:36px

Paragraph with justify Use tags text-justify for get desire paragraph.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla enim nisl, accumsan sit amet libero ut, aliquet efficitur lectus. Quisque at gravida lorem. Ut tristique luctus ante, ut tempus eros vehicula sed. Nullam hendrerit est massa, vitae lacinia metus mollis condimentum. Suspendisse pharetra eros massa, eu malesuada ligula malesuada non. Nulla sagittis sapien id condimentum consectetur. Donec lacus sapien, mattis in condimentum quis, faucibus in massa. Nunc sit amet placerat metus.

Alignment Text Use tags .text-left, .text-center, .text-right for get desire text.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Lists Use tags text-justify for get desire paragraph.

Ordered Lists

  1. Ordered list item
  2. Ordered list item
    1. Ordered list item
    2. Ordered list item
  3. Ordered list item
  4. Ordered list item

Unordered Lists

  • Unordered list item
  • Unordered list item
    • Unordered list item
    • Unordered list item
  • Unordered list item
  • Unordered list item

Definition Lists

Donec lacus sapien
Donec lacus sapien, mattis in condimentum quis
Donec lacus sapien
Donec lacus sapien, mattis in condimentum quis
Text Styles Use all material colors. Use .col-red-100 ... .col-red ... .col-red-900
See All Material Colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Theme Settings
Dark
User Card
Show Logo
Full Height
Bordered
Sidebar: Horizantal Sizing
Sidebar: Vertical Sizing
None