Typography

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

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 3

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 4

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 5

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 6

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

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

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!

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 >

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Eget porttitor lorem

[highlighter brush=plain]

  • ...
[/highlighter]

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

[highlighter brush=plain]

  1. ...
[/highlighter]

Oficina del Proyecto

Fundación Internacional María Luisa de Moreno

Calle 11B # 59 - 26
Santiago de Cali • Valle del Cauca

Teléfono: +572 379 7097

Correo: sinlimites@fundacionmarialuisa.org

Diligenciar formulario de contacto

Fotos de Actividades

Oficina de Prensa

Alcaldía de Santiago de Cali

CAM Avenida 2Norte # 10 - 70
Torre 5 • Santiago de Cali • Valle del Cauca
Primer piso, Oficina de Discapacidad
Secretaria de Desarrollo Territorial y Bienestar Social

Teléfono: +572 889 6332 Ext. 104

Correo: contacto@programasinlimites.org

Diligenciar formulario de contacto