Typography

Take care about your typography to make better user experience for your readers. How to achieve that?

Learn more about typography, especially about the most often used elements, such as paragraph, headings, lists, etc.
This template has a valid HTML, but if you want to keep it like that, you must learn and follow the HTML principles.
Familiarize yourself with CSS styles that comes with this template.

Heading 1

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.

Heading 2

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.

Heading 3

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.

Heading 4

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.

Paragraph with Big First Letter

This is a dropcap style applied to a paragraph of text. To use it, apply class of dropcap to your paragraph of text. To have a quote styled like that, apply "dropcap" class.

Quote/Citation

My mother said to me, "If you are a soldier, you will become a general. If you are a monk, you will become the Pope." Instead, I was a painter, and became Picasso... To have a quote styled like that, apply "quote" class.

Notice Styles with Background Color

This is a warning message you may use in your text. Simply add "warning" class to your paragraphs to achieve this effect. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

This is a information message you may use in your text. Simply add "info" class to your paragraphs to achieve this effect. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

This is an error message you may use in your text. Simply add "error" class to your paragraphs to achieve this effect. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

Notice Styles with Outline

This is a warning message you may use in your text. Simply add "warning outline" class to your paragraphs to achieve this effect. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

This is a information message you may use in your text. Simply add "info outline" class to your paragraphs to achieve this effect. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

This is an error message you may use in your text. Simply add "error outline" class to your paragraphs to achieve this effect. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

Typewriter Style

This is a typewriter message you may use in your text. Simply add "typewriter" class to your paragraphs to achieve this effect. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

1 This is a paragraph of text marked with a big number or letter. To make such paragraph of text, you should enter number before the rest of the text in the paragraph and add class "p_number" to the paragraph.

2 This is a paragraph of text marked with a big number or letter. To make such paragraph of text, you should enter number before the rest of the text in the paragraph and add class "p_number" to the paragraph.

A This is a paragraph of text marked with a big number or letter. To make such paragraph of text, you should enter number before the rest of the text in the paragraph and add class "p_number" to the paragraph.

B This is a paragraph of text marked with a big number or letter. To make such paragraph of text, you should enter number before the rest of the text in the paragraph and add class "p_number" to the paragraph.

Unordered List

list element one
list element two
list element three
list element four

Ordered List

list element one
list element two
list element three
list element four

Arrow list sample:

to achieve this effect
add class "arrow"
to the list block

Arrow left list sample:

to achieve this effect
add class "arrowleft"
to the list block

Calendar list sample:

to achieve this effect
add class "calendar"
to the list block

Check list sample:

to achieve this effect
add class "checklist"
to the list block

Delete list sample:

to achieve this effect
add class "delete"
to the list block

Email list sample:

to achieve this effect
add class "email"
to the list block

File list sample:

to achieve this effect
add class "file"
to the list block

Folder list sample:

to achieve this effect
add class "folder"
to the list block

Heart list sample:

to achieve this effect
add class "heart"
to the list block

Information list sample:

to achieve this effect
add class "information"
to the list block

Lock list sample:

to achieve this effect
add class "lock"
to the list block

Pencil list sample:

to achieve this effect
add class "pencil"
to the list block

Person list sample:

to achieve this effect
add class "person"
to the list block

RSS list sample:

to achieve this effect
add class "rss"
to the list block

Shopping list sample:

to achieve this effect
add class "shop"
to the list block

Song list sample:

to achieve this effect
add class "song"
to the list block

Star list sample:

to achieve this effect
add class "star"
to the list block

Trash list sample:

to achieve this effect
add class "trash"
to the list block

Tweak list sample:

to achieve this effect
add class "tweak"
to the list block

Unlock list sample:

to achieve this effect
add class "unlock"
to the list block

Warning list sample:

to achieve this effect
add class "warn"
to the list block

CSS3 Columns

Two columns - use paragraph with class "two-cols"

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Three columns - use paragraph with class "three-cols"

Four columns - use paragraph with class "four-cols"

Five columns - use paragraph with class "five-cols"

Six columns - use paragraph with class "six-cols"

Font Awesome 5 Icon Set Included

Font Awesome is icon font set that counts over 1,600 vector icons. The icons are scalable and looks great in all sizes. Also, icon fonts are better for site speed than ordinary image icons because only one file is loaded. You can include these icons in your articles or modules easily by adding icon blocks.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph with Big First Letter

Quote/Citation

Notice Styles with Background Color

Notice Styles with Outline

Typewriter Style

Unordered List

Ordered List

Arrow list sample:

Arrow left list sample:

Calendar list sample:

Check list sample:

Delete list sample:

Email list sample:

File list sample:

Folder list sample:

Heart list sample:

Information list sample:

Lock list sample:

Pencil list sample:

Person list sample:

RSS list sample:

Shopping list sample:

Song list sample:

Star list sample:

Trash list sample:

Tweak list sample:

Unlock list sample:

Warning list sample:

CSS3 Columns

Two columns - use paragraph with class "two-cols"

Three columns - use paragraph with class "three-cols"

Four columns - use paragraph with class "four-cols"

Five columns - use paragraph with class "five-cols"

Six columns - use paragraph with class "six-cols"

Font Awesome 5 Icon Set Included

About

Pages

Extensions

Samples