Welcome to Zentail Style Guide

On this page, you will find the latest styles applied to the Zentail website. With a detailed

Fonts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

ROBOTO BOLD

A B C D E F G 1 2 3 4 5 6 7

Roboto Regular

A B C D E F G 1 2 3 4 5 6 7

Colors

100%

90%

80%

70%

60%

100%

90%

80%

70%

60%

100%

90%

80%

70%

60%

100%

90%

80%

70%

60%

Typo

This is the Heading #1

This is the Heading #2

This is the Heading #3

This is the Heading #4

This is the Heading #5

This is the Heading #6

This is the Heading #6

This is the paragraph style:

‍ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Bold Style

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. ‍

Italic Style Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. smallParagraph

‍ Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

largeParagraph

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

largeParagraph + light Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

• For lists, is better to use text block because it inherits the style of the container. But you can use paragraph as well!
• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

This is a block-quote. Although is not use for reviews!

heroBannerHeading

heroBannerSubHeading

use sectionHeading for SEO purposes

use sectionHeading + small for SEO purposes

use sectionlabel for this text

Text Link

Classes

This section refers to the base classes the website uses.

Each one of the elements, may have variations depending on the specific uses

Sections

The main class for all sections is " section", this element helps mantain the same margins between the content in the page.

There are several section added clases that are specific per use.

section

centerContainer

sectionColumns

Alignment

This classes help the alignment of the page remain constant when changed to responsive

alignLeft

alignCenter

alignRight

Buttons

This classes help the alignment of the page remain constant when changed to responsive

General Button

button

General Button (oposite color)

button oposite

Transparent Button

button full

Block Button (full width)

button full

Button (Dark Background)

button full

Cards Button (Blog & Success Stories)

buttonArticles

Featured Cards Button (Blog & Success Stories)

buttonArticles opositeColor

Featured Cards Button (Blog & Success Stories)

Let's talk more!

Paddings, Margins & Spaces

The classes that correspond to the separation of the element are followed by the side of the element that will be affected, like so:

marginLeft = Margin on the left (default margin 25px)

If the element is followed by a number, it means the margin have that same amount of margin on that side in " px", for example:

paddingLeft50 = 50px padding on the left side

you can use this style on every element as a second class, for example:

button marginBottom

As well as adding margin or paddings, we can cancel them using " noMargin" or " noPadding" classes

Another general class is " paddingAll " , and **_