Text and Content
Typography
Elements required for any page to create beautiful, legible and easy to follow content.
H1
This is an example of heading one
H2
This is an example of heading two.
H3
This is an example of heading three.
H4
This is an example of heading four.
H5
This is an example of heading five.
H1 - h1
This is an example of heading one.
H2 - h2
This is an example of heading two.
H3 - h3
This is an example of heading three.
H4 - h4
This is an example of heading four.
H5- h5
This is an example of heading five.
Contrasts
Let's say you have a very light text on a dark background. Here is where contrasts are perfect.
I'm set to 90% opacity.
I'm set to 80% opacity.
I'm set to 70% opacity.
I'm set to 60% opacity.
I'm set to 50% opacity.
I'm set to 40% opacity.
I'm set to 30% opacity.
I'm set to 20% opacity.
I'm set to 10% opacity.
Font Weights
Select the thickness of your font with ease. Add a secondary class that will change weights.
This text is set to 900 weight.
This text is set to 800 weight.
This text is set to 700 weight.
This text is set to 600 weight.
This text is set to 500 weight.
This text is set to 400 weight.
This text is set to 300 weight.
This text is set to 200 weight.
Lists
Select the thickness of your font with ease. Add a secondary class that will change weights.
- List
- List
- List
- List
- List
- List
- List
- List
- List
- List
- List
- List
- List
- List
- List
Highlights
Showcase the most important part of a paragraph with highlights. Easy and awesome!
We've highlighted this part of the text.
We've highlighted this part of the text.
We've highlighted this part of the text.
We've highlighted this part of the text.
We've highlighted this part of the text.
Time to Go Mobile
Get Duo Mobile Today
Start your next project with Duo and enjoy the power of a Progressive Web App.
Get Duo Now