[vimeo width={100%} height={500} autoplay={autoplay} id={82557065}][/vimeo]

Get the code

[highlighter brush=plain][vimeo width={width} height={height} autoplay={autoplay} id={id}]{content}[ /vimeo][/highlighter]

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 Zo2 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

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 Heading 2

This is Heading 3

This is Heading 4

This is Heading 5

This is Heading 6

Code

#wrapper {
  position: relative;
  float: left;
  display: block;
}

Use <pre> or <div class="zt-code1">Here goes your code</div>

#wrapper {
position: relative;
float: left;
display: block;
}

Use <div class="zt-code2">Here goes your code</div>

File

#wrapper {
position: relative;
float: left;
}

Use <div class="zt-code3"><h4>Name of your file</h4>Here goes your code</div>

Highlights

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase

Use <span class="zt-highlight1">Your highlight phrase goes here!</span>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase

Use <span class="zt-highlight2">Your highlight phrase goes here!</span>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase

Use <span class="zt-highlight3">Your highlight phrase goes here!</span>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase

Use <span class="zt-highlight4">Your highlight phrase goes here!</span>

Unordered lists

ul with class zt-icon-angle-down

ul with class zt-icon-angle-left

ul with class zt-icon-angle-right

ul with class zt-icon-angle-up

ul with class zt-icon-arrow-down

ul with class zt-icon-arrow-left

ul with class zt-icon-arrow-right

ul with class zt-icon-arrow-up

ul with class zt-icon-caret-down

ul with class zt-icon-caret-left

ul with class zt-icon-caret-right

ul with class zt-icon-caret-up

ul with class zt-icon-chevron-down

ul with class zt-icon-chevron-left

ul with class zt-icon-chevron-right

ul with class zt-icon-chevron-up

ul with class zt-icon-chevron-sign-down

ul with class zt-icon-chevron-sign-left

ul with class zt-icon-chevron-sign-right

ul with class zt-icon-circle-arrow-down

ul with class zt-icon-circle-arrow-left

ul with class zt-icon-circle-arrow-right

ul with class zt-icon-circle-arrow-up

ul with class zt-icon-double-angle-down

ul with class zt-icon-double-angle-left

ul with class zt-icon-double-angle-right

ul with class zt-icon-double-angle-up

ul with class zt-icon-hand-down

ul with class zt-icon-hand-left

ul with class zt-icon-hand-right

ul with class zt-icon-hand-up

ul with class zt-icon-long-arrow-down

ul with class zt-icon-long-arrow-left

ul with class zt-icon-long-arrow-right

ul with class zt-icon-long-arrow-up

Warnings

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!

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
Use < blockquote><div class="zt-blockquote1"><div> Your quoted text goes here!< /div>< /div>< /blockquote >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
Use < blockquote><div class="zt-blockquote2"><div> Your quoted text goes here!< /div>< /div>< /blockquote >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
Use < blockquote><div class="zt-blockquote3"><div> Your quoted text goes here!< /div>< /div>< /blockquote >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
Use < blockquote><div class="zt-blockquote4"><div> Your quoted text goes here!< /div>< /div>< /blockquote >

[testimonial author=Zootemplate position=Developer]Praesent lobortis eleifend ultrices. In consectetur aliquam quam eu auctor. In sagittis sem a libero fermentum ultrices eu ut felis. Pellentesque vulputate, justo in sodales bibendum, tellus lectus vehicula dolor, quis sollicitudin diam diam quis dui. Sed volutpat sapien vitae lacus dictum facilisis. Etiam mattis auctor ligula eget convallis. Sed malesuada metus nec diam mattis auctor. Mauris tellus lacus, consequat quis dapibus in, feugiat vel dolor.[/testimonial] [space height=20][/space]

Get the code

[highlighter brush=plain] [testimonial author={author} position={position}]{content}[/ testimonial] [/highlighter]

[twitter username=zootemplates id=426559926115115008]{content}[/twitter] [space height=20][/space]

Get The Code

[highlighter brush=plain][twitter username={username} id={id}]{content}[ /twitter][/highlighter]

[tabs] [tab_title name=tab1] Tab 1 title [/tab_title] [tab_title name=tab2] Tab 2 title [/tab_title] [/tabs] [tabs_content] [tab_content name=tab1]

Praesent suscipit tempor sapien vitae ultricies! Suspendisse rutrum lobortis tellus ornare luctus. Etiam eu nunc ut ante euismod aliquam. Pellentesque lorem metus, aliquet sed pellentesque nec, gravida sit amet neque? Vestibulum adipiscing velit quis dolor [/tab_content] [tab_content name=tab2]

Quisque ipsum mi, ornare tempor felis ut, feugiat bibendum mi! Nunc ut egestas tellus, vel scelerisque libero. Sed lobortis ante porta lacus pulvinar fermentum. Duis velit augue, hendrerit nec tincidunt imperdiet, euismod in nibh. Aenean aliquam, ipsum sit amet tincidunt laoreet, dui quam congue enim, eget sollicitudin urna nibh vitae velit [/tab_content] [/tabs_content] [space height=20][/space]

Get the code

[highlighter brush=plain] [tabs] [tab_title name={name}]{content}[/ tab_title] [/ tabs] [tabs_content] [tab_content name={name}]{content}[/ tab_content] [/ tabs_content] [/highlighter]

		Rue André Ampère cité administrative 2080 - Ariana Tunisie
		contact@cti-network.com
		71 701 110 71 703 120

Blog

Get the code

Heading Styles

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5

This is Heading 6

Code

File

Highlights

Unordered lists

Warnings

Blockquotes

Get the code

Get The Code

Get the code