Elements / Headings & Text
On this page you find the basic layout elements that we have prepared for you in this template
Image by Damir Spanic on unsplash.com
Heading H1
The big display heading plays a special role in the template's design.It is available as H1 in the themes main colors and in severals variants.
All are accessible with easy-to-use css classes. Hover your mouse over the headings to see which CSS classes apply.
Heading h1
.color-2
.color-dark
Heading
Heading1
Heading
Heading
Heading
If the parent element is set to .colors-bg-dark, different colors apply:
Heading h1
.color-2
.shadow
Heading
Heading
Heading
Heading
Heading
Heading H2
The headings H2 and H3 come in a feminine font, setting a beautiful contrast.Use these as section titles or paragraph headings.
Heading h2
H2.addline
H2.color-2
.color-2-shadow
Heading h3
H3.color-2
with-shadow
Heading h2
H2.addline
H2.color-2
.color-2-shadow
Heading H3
H3.color-2
with-shadow
SMALLER HEADINGS
The smaller headings come in uppercase letters and light font weight.They make great tag lines in combination with the bigger headings.
Heading H4
H2.addline
H5 .color-2
Heading h2
Lorem ipsum dolor sit amet, mea case impetus vulputate cu. At est ocurreret aliquando urbanitas. Ad eam eius ipsum. Diam probo cetero ex eam, et accusamus scribentur intellegebat quo, at tincidunt quaerendum eos.
H6 .color-2
H2.color-2
Heading H6
H2.addline
Text
Text paragraphs are pre-formatted in a font and size which is easy to read for all screens.Text-align is available in left, center and justify as classes.
Use the .long-text class to add an aditional styling to the first letter.
Use the blockquote element for pre-formatted quotations.
Normal paragraph within a .long-text parent. Ad eam eius ipsum. Diam probo cetero ex eam, et accusamus scribentur intellegebat quo, at tincidunt quaerendum eos. Lorem ipsum dolor sit amet, mea case impetus vulputate cu. At est ocurreret aliquando urbanitas.
This paragraph is additionally centered. Lorem ipsum dolor sit amet, mea case impetus vulputate cu. At est ocurreret aliquando urbanitas. Ad eam eius ipsum. Diam probo cetero ex eam, et accusamus scribentur intellegebat quo, at tincidunt quaerendum eos.
Smaller text is set with .small-text class. Ad eam eius ipsum. Diam probo cetero ex eam, et accusamus scribentur intellegebat quo, at tincidunt quaerendum eos. Lorem ipsum dolor sit amet, mea case impetus vulputate cu. At est ocurreret aliquando urbanitas.
"This text is set in the blckquote element. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
Normal paragraph within a .long-text parent. Ad eam eius ipsum. Diam probo cetero ex eam, et accusamus scribentur intellegebat quo, at tincidunt quaerendum eos. Lorem ipsum dolor sit amet, mea case impetus vulputate cu. At est ocurreret aliquando urbanitas.
This paragraph is additionally centered. Lorem ipsum dolor sit amet, mea case impetus vulputate cu. At est ocurreret aliquando urbanitas. Ad eam eius ipsum. Diam probo cetero ex eam, et accusamus scribentur intellegebat quo, at tincidunt quaerendum eos.
Smaller text is set with .small-text class. Ad eam eius ipsum. Diam probo cetero ex eam, et accusamus scribentur intellegebat quo, at tincidunt quaerendum eos. Lorem ipsum dolor sit amet, mea case impetus vulputate cu. At est ocurreret aliquando urbanitas.
"This text is set in the blckquote element. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."