Typography

d-h

headings


h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

h1. Heading 1 - Secondary text

h2. Heading 2 - Secondary text

h3. Heading 3 - Secondary text

h4. Heading 4 - Secondary text

h5. Heading 5 - Secondary text
h6. Heading 6 - Secondary text

headings with divider


Use class .hr-short in hr tag for styled divider.
Use class .hr-light if you need light divider (best for dark backrounds).

<hr class="hr-short hr-light">

h1. Heading 1 - Secondary text


h2. Heading 2 - Secondary text


h3. Heading 3 - Secondary text


h4. Heading 4 - Secondary text


h5. Heading 5 - Secondary text

h6. Heading 6 - Secondary text


paragraph examples


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus qui totam sint autem, quia ullam ea, labore sapiente amet iure voluptatibus aut ad esse provident. Doloribus quas, quisquam vel voluptas.

Amet maecenas ut orci id dui. Et dui morbi. Non mauris nullam. Wisi gravida quis quisque mattis dolor. Etiam sociis turpis nesciunt sed lacus sed hendrerit diam. Accumsan varius venenatis arcu maecenas nulla. Aliquet tempus lobortis.

Diam faucibus aliquam sup example vestibulum vehicula wisi ut volutpat nulla. Torquent lectus quisque purus fermentum pellentesque. Morbi justo nam. Vulputate non mi. Felis scelerisque metus suspendisse lectus erat sit fusce porttitor. Eget posuere massa. Justo felis tempor. Faucibus in diam id pede eu. Suspendisse eu neque elit explicabo malesuada. Dictum vel ut luctus ac ipsum integer egestas amet dui nisl pellentesque here is a link example.

Non mauris nullam. Wisi gravida quis quisque mattis dolor. Etiam sociis turpis nesciunt sed lacus sed hendrerit diam. Accumsan varius venenatis arcu maecenas nulla. Aliquet tempus lobortis. Tortor nibh erat vel gravida est accumsan ut ad. Orci malesuada morbi. Luctus pharetra lectus.

Vestibulum proin etiam etiam eget in. Nibh wisi velit. Pellentesque justo tellus est cras ligula. Feugiat fringilla sequi. A nunc adipiscing nisl lorem morbi tincidunt gravida ut.

Tellus vestibulum aliquet praesent praesent rhoncus nam cras varius. Dolor elit condimentum erat dapibus ac purus eleifend amet sed ac pede. Condimentum volutpat nulla. Molestie est ac. Integer perferendis donec. Venenatis id diam at justo vulputate.


text color classes


Available background color classes: .text-main, .text-white, .text-gray, .text-gray-2, .text-gray-3, .text-dark, .text-dark-2, .text-dark-3, .text-green, .text-blue, .text-yellow, .text-red, .text-brown, .text-purple, .text-pink

Look into "helper.css" file for more about helper classes.

example:

Diam faucibus aliquam vestibulum vehicula wisi ut volutpat nulla. Torquent lectus quisque purus fermentum pellentesque. Morbi justo nam. Vulputate non mise Felis scelerisque metus suspendisse lectus erat sit fusce porttitor. Eget posuere massa. Justo felis tempor. Faucibus in diam id pede eu. Suspendisse eu neque elit explicabo malesuada.


backround color classes


Available background color classes: .bg-main, .bg-white, .bg-gray, .bg-gray-2, .bg-gray-3, .bg-dark, .bg-dark-2, .bg-dark-3, .bg-green, .bg-blue, .bg-yellow, .bg-red, .bg-brown, .bg-purple, .bg-pink

Look into "helper.css" file for more about helper classes.

example:

Diam faucibus aliquam vestibulum vehicula wisi ut volutpat nulla. Torquent lectus quisque purus fermentum pellentesque. Morbi justo nam. Vulputate non mise Felis scelerisque metus suspendisse lectus erat sit fusce porttitor. Eget posuere massa. Justo felis tempor. Faucibus in diam id pede eu. Suspendisse eu neque elit explicabo malesuada.


Unordered List


  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unstyled List


  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered List


  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Inline Lists



Tooltips


Lorem ipsum dolor sit amet, hover on me Lorem ipsum dolor sit hover on me amet, consectetur adipisicing elit. Explicabo nemo soluta omnis, dolores ad facere. Aperiam odit tenetur hover on me rem esse enim quae molestias qui voluptas hover on me itaque laboriosam. Cum, repellat, in.


Popovers


Quis ante id eros click on me orci eget. Ac egestas praesent aliquam nisl in vitae aliquam vitae. Vivamus click on me sed elementum. Sem sed sed. Hendrerit elit click on me eget sem pellentesque a. Velit elit lacinia mattis amet nunc. Fames ipsum rhoncus. Natoque posuere nam commodo mattis orci. Aliquet praesent click on me tempor ac dolor aliquet. Risus mi vitae hendrerit orci vitae amet libero id eget quis nullam aliquam nisl in vitae aliquam vitae..