It is possible with templates which have a typography page to show you how you can use e.g. headline tags in order to structure your content in a better way. Below, we present rebuilt and refreshed typographical aspects of Gavern Framework. In order to use it, you have to use a plug in which is delivered in a package with a template or use HTML code.
Heading Styles
This is Heading 1
This is Heading 2
This is Heading 3
This is Heading 4
Pre Code Styles
Below is a sample of <pre> or <div class="code">
#zt-body {
width: 180px;
float: right;
color: #EEEEEE;
}
#zt-body {
width: 180px;
float: right;
color: #EEEEEE;
}
Highlights
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is a highlight phrase.
Use <span class="highlight">Your highlight phrase goes here!</span>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is a highlight phrase.
Use <span class="highlight1">Your highlight phrase goes here!</span>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is a highlight phrase.
Use <span class="highlight2">Your highlight phrase goes here!</span>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is a highlight phrase.
Use <span class="highlight3">Your highlight phrase goes here!</span>.
Icon set 1
Unordered lists
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
Warnings
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Phasellus venenatis mollis augue, non posuere odio placerat in. Etiam volutpat ultrices lectus.
This is a sample clip note. Use <p class="box-info">Your clip note goes here!</p> to form a clip note!
This is a sample clip note. Use <p class="box-warning">Your clip note goes here!</p> to form a clip note!
This is a sample clip note. Use <p class="box-stickynote">Your clip note goes here!</p> to form a clip note!
This is a sample clip note. Use <p class="box-upload">Your clip note goes here!</p> to form a clip note!
This is a sample clip note. Use <p class="box-download">Your clip note goes here!</p> to form a clip note!