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

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.

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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Someone famous in Source Title
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
PRESET: Pill
PRESET: Circle
ADD-ON: BUTTON BLOCK

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

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.

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

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.

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.

Tabs

PRESET: DEFAULT Top (default)

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.

PRESET: DEFAULT Left

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.

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

PRESET: DEFAULT Right

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.

PRESET: Secondary Top

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.

PRESET: Secondary Left/RIGHT

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.

PRESET: Secondary LEFT/Right

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.

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.

 

ImportantIt 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?

 

  1. Select preset to select format
  2. Change back to "None" and see that the format will be kept
  3. 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

BASE CLASSES

Auxiliary classes for any elements

Text Colors

.text-primary

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

.text-secondary

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

.text-accent

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

.text-info

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

.text-success

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

.text-warning

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

.text-danger

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

.text-muted

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

.text-inverse

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

.title-inverse

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

Text Size

.text-xs, .small
<small>

Text Extra Small - 80%

Line Height: 1.3

Etiam tincidunt lacus vitae accumsan commodo. Nulla sed magna ullamcorper.

Praesent cursus suscipit semper. Nullam varius erat lectus, ut pulvinar ipsum dignissim quis.

Etiam tincidunt lacus vitae Phasellus ut mattis justo. Fusce quis mattis ante.

.text-sm

Text Small - 90%

Line Height: 1.3

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

.text-md

Text Medium - 100%

Line Height: 1.3

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

.text-lg
<big>

Text Large - 125%

Line Height: 1.3

Etiam tincidunt lacus vitae accumsan commodo.

Nulla sed magna ullamcorper, vestibulum nibh non, varius sapien.

.text-xl

Text Extra Large - 150%

Line Height: 1.3

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

Text Alignment

.text-left

Left Alignment

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

.text-center

Center Alignment

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

.text-right

Right Alignment

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

.text-justify

Justified Alignment

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.

Text Transform

.text-upper

Uppercase

.text-lower

Lowercase

.text-capitalize

capitalize (set uppercase in first character)

Font Weight

.text-bold

Etiam tincidunt lacus vitae accumsan commodo.

.text-normal

Etiam tincidunt lacus vitae accumsan commodo.

Margin

.margin

Set default space as margin on all sides

.margin-sm

Set small space as margin on all sides

.margin-lg

Set large space as margin on all sides

.no-margin

Remove margin on all sides

Options

To set the margin at specific corners, use the following terms after "margin": -top, -right, -bottom, -left.

Ex: margin-top / margin-bottom-sm/ margin-left-lg/ no-margin-bottom

Padding

.padding

Set default space as padding on all sides

.padding-sm

Set small space as padding on all sides

.padding-lg

Set large space as padding on all sides

.no-padding

Remove padding on all sides

Options

To set the padding at specific corners, use the following terms after "margin": -top, -right, -bottom, -left.

Ex: padding-top / padding-bottom-sm/ padding-left-lg/ no-padding-bottom

BORDER

.border

Borders on all sides


.border-top

Border on top of element


.border-right

Right side border of element


.border-bottom

Border at bottom of element


.border-left

Border on left side of element


.no-border

Remove border on all side of element


Options

To remove border at specific corners use the suffixes: top, right, bottom, left.

Ex: no-border-top / no-border-right / no-border-bottom/ no-border-left

.border-primary

Border in primary color


.border-secondary

Border in secondary color


.border-accent

Border in accent color


.border-info

Border in info color


.border-success

Border in success color


.border-danger

Border in danger color


.border-warning

Border in warning color


BORDER Radius

.squared

.rounded-sm

.rounded-md

.rounded-lg

.rounded-xl

.rounded-pill

.rounded-circle

.rounded default

The default rounding is based on one of the available rounding (0, sm, md, lg, xl). It serves to set the default of items such as buttons, form fields, and more.

Background Color

.bg-primary

.bg-secondary

.bg-accent

.bg-body

.bg-light

.bg-dark

.bg-dark-accent

.bg-info

.bg-info-inverse

.bg-success

.bg-success-inverse

.bg-danger

.bg-danger-inverse

.bg-warning

.bg-warning-inverse