Style Guide

An overview of the main style elements available in the builder.

Colors

Brand

Primary

Secondary

Accent

Backgrounds

BG Primary

BG Secondary

BG Dark

BG Dark Accent

auxiliary

Border

Shadow

Overlay

Hover

Contextual

Info

Info Inverse

Success

Success Inverse

Warning

Warning Inverse

Danger

Danger Inverse

Text Colors

Text Color Default

Title Color

Subtitle

Text Inverse

Title Inverse

Typography

Headers

Headline H1

Headline H2

Headline H3

Headline H4

Headline H5

Headline H6

Header H1

Header H2

Header H3

Header H4

Header H5

Header H6

BORDERED: Use the "border" helper classes to set border to element.

Header Bordered

SPACING: Use the "margin" and "padding" helper classes to set custom spacing to element.

Header Bordered

BASE: To use a Section Header simply assign the "section-header" class to the container of a h1, h2 ... h6 elements.

Section Header H1

Section Header H2

Section Header H3

Section Header H4

Section Header H5

Section Header H6

SPACING: Use the "margin" and "padding" helper classes to set custom spacing to element.

ALIGNMENT: Use the "text-left / center / right" helper classes along with the "section-header" class to change element text-align.

Header Left

Header Center

Header Right

BORDERED: Use the "border" helper classes along with the "section-header" class to set border to element.

Header Left

Header Center

Header Right

Paragraph

INLINE TEXT ELEMENTS

Links are used to connect web pages.

For example, <code> should be wrapped as inline.

Variables: y = mx + b

To switch directories, type ctrl + , followed by the name of the directory.

This text is meant to be treated as sample output from a computer program.

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Someone famous in Source Title

Pre

<pre>...</pre>

<blockquote>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 <small class="source">Someone Author</small>
</blockquote>

Pre + Code

<pre><code>...</code></pre>

<blockquote>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 <small class="source">Someone Author</small>
</blockquote>

Note: Use .reset to avoid conflict with others code libraries. Eg: Prism

<pre class="reset"><code>...</code></pre>

Badges

Lorem ipsum dolor sit amet, conpsecteqtur adipiscing elit. Pellentesque id gravida tellus, non placerat lacus. Sed et erat suscipit, fringilla tellus quis, malesuada sapien. Nulla tempor ullamcorper nisi, sed condimentum urna feugiat ut. Phasellus ut mattis justo. Fusce quis mattis ante. Aliquam id eleifend nibh. Quisque sed erat rhoncus, finibus urna at, congue tellus.

text <span class="badge">text</span>

Note: Use utility classes to assign colors to badges.
text <span class="badge bg-primary text-inverse">text</span>

Buttons

PRESET: DEFAULT

Small

Default

Large

PRESET: Pill

Small

Default

Large

PRESET: Circle

ADD-ON: BUTTON BLOCK

Default

This button is implemented through the "Button" plugin with the assignment of the "btn-block" class.

LIBRARY NOTE:

A "Button Block" element was created in the library to facilitate the use of that element. It contains a button in its default state and can be freely customized, including using the available presets.
For example: the button above shows the customized library item with the preset "Default"

Collapse

Preset: Default

Collapse 1

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien. Praesent cursus suscipit semper. Nullam varius erat lectus, ut pulvinar ipsum dignissim quis. Phasellus ut mattis justo. Fusce quis mattis ante.

Collapse 2

Phasellus ut mattis justo. Fusce quis mattis ante. Aliquam id eleifend nibh. Quisque sed erat rhoncus, finibus urna at, congue tellus. Pellentesque ultrices urna orci, ut sollicitudin sapien viverra ac.

Preset: Primary

Collapse 1

Collapse 2

Tabs

PRESET: DEFAULT Left

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien. Praesent cursus suscipit semper.

PRESET: DEFAULT Right

PRESET: Secondary Top

Tab 1
Tab 2

PRESET: Secondary Left/RIGHT

PRESET: Secondary LEFT/Right

Tabelas

LIBRARY NOTE:

The Tables below are not available through Plugins. They are customized solutions saved in the library. Presets have also been created to facilitate the reuse or customization of table patterns. Thus, to customize the table, just change the Presets defined for the tables.

tABLE

Head 1

Head 2

Head 3

Head 4

Text 1

Text 2

Text 3

Text 4

tABLE gRID

Head 1

Head 2

Head 3

Head 4

Text 1

Text 2

Text 3

Text 4

PRESETS - Custom Formats

These are predefined formats that can be set as default for a plugin. To create a preset just edit the item, select the preset option and click add.

Important: It is very important to note that when we use a preset, its presets are global, that is, if you change a button defined with a preset, all others that are configured with the same preset will be changed as well.

So how do you individually customize a item that uses a preset?

Select preset to select format
Change back to "None" and see that the format will be kept
Now it is possible to change the element individually based on a preset

Even so, it is important to note that this element will not be affected if a preset is changed.

Utility Classes

BLOG APP

Auxiliary classes for Blog App

Single Post Layout

.hide-image-intro

Hides the main image on the publication page. View image only in post listings.

Post List

.hide-first-item

Hides the first image from the post list.

.hide-first-2-item

Hides the first two images from the post list.

.hide-first-3-item

Hides the first three images from the post list.

.hide-first-4-item

Hides the first four images from the post list.

Posts List - Classic Layout

.image-to-right

Position the image on the right side.

.list-bordered

Show a border between items

.list-bordered.dashed

Set border style as Dashed

.list-bordered.dotted

Set border style as Dotted