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 Regular
A B C D E F G 1 2 3 4 5 6 7
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.
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.
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.
This is a block-quote. Although is not use for reviews!
This section refers to the base classes the website uses.
Each one of the elements, may have variations depending on the specific uses
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
This classes help the alignment of the page remain constant when changed to responsive
alignLeft
alignCenter
alignRight
This classes help the alignment of the page remain constant when changed to responsive
General Button
buttonGeneral Button (oposite color)
button opositeTransparent Button
button fullBlock Button (full width)
button fullButton (Dark Background)
button fullCards Button (Blog & Success Stories)
buttonArticlesFeatured Cards Button (Blog & Success Stories)
buttonArticles opositeColorFeatured Cards Button (Blog & Success Stories)
Let's talk more!navLinkPrimary
navLinkPrimarynavLinkFooter
navLinkFooterThe 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 "marginAll" which by default places 25px on every side of the element.
"paddingSpace" adds 25px to the top and bottom padding.
"sidePadding" adds 12px to the left and right padding.
Spaces are used to separate elements that don't have any break rules, they should be used with care.
marginTop
marginBottom
marginLeft
marginRight
paddingBottom
paddingTop
paddingSpace
sidePadding
paddingLeft
paddingRight
marginAll
paddingAll
space25
space50
space75
When creating pages, we need to have a reference to what layouts we are going to use.
So, we are initially going to list the frequent content distribution layouts that Zentail is using.
This container has noMarginLeft in order to keep the margin consistent.
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.
This container, has noMarginRight in order to keep the margin consistent.
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.
When using the grid container, remember to place everything into a div.
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.
This button goes well with this background
When placing images into the website, is very important to determine the size of them.
Icon with 25px height
Icon with 50px height
Icon with 90px height
Image with 250px height
This class sets the image to a max height of 90% , and a max width of 90%.
Is created to limit the size of the images in larger devices
The full image expands the image to a 100% width.
This should be use with fixed width containers.
This section refers to the base classes the website uses.
Each one of the elements, may have variations depending on the specific uses
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.
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.
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.
