An overview of the main style elements available in the builder.
Primary
Secondary
Accent
BG Primary
BG Secondary
BG Dark
BG Dark Accent
Border
Shadow
Overlay
Hover
Info
Info Inverse
Success
Success Inverse
Warning
Warning Inverse
Danger
Danger Inverse
Text Color Default
Title Color
Subtitle
Text Inverse
Title Inverse
BORDERED: Use the "border" helper classes to set border to element.
SPACING: Use the "margin" and "padding" helper classes to set custom spacing to element.
BASE: To use a Section Header simply assign the "section-header" class to the container of a h1, h2 ... h6 elements.
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 |
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.
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.
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>
<blockquote> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <small class="source">Someone Author</small> </blockquote>
<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
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>
This button is implemented through the "Button" plugin with the assignment of the "btn-block" class.
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"