Website Info

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

Note: Use .border-color utilities to change border color.

<blockquote class="border-danger">...</blockquote >

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: The use of any class, disables this default style. This is to be avoided with optional libraries. Eg: Prism

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"