Library

All nitty gritty about our brand
Index

Typography

Headings

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is a small header.</h5>
<h6>h6. This is a tiny header.</h6>

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.

Avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <h2> in your code, the next heading used should be either <h2> or <h3>. If you just want to show a bigger/smaller font size based on the heading, use class instead, e.g.: <div class="h1"&gt.

<h1 class="h2">This is h1 with h2 size.</h1>
<h2 class="h1">This is h2 with h1 size.</h2>
<div class="h3">This is div with h3 size.</div>

This is h1 with h2 size.

This is h2 with h1 size.

This is div with h3 size.

Body

You need not add a paragraph tag, unless you’d like to create additional styles. When doing so, the html code is:

<p>My name is <a class="link arrow-right" href="#">Caius Marcius</a>, 
who hath done. To thee particularly and to all the Volsces. Great hurt 
and mischief; thereto witness may. My surname, Coriolanus. The painful 
service, The extreme dangers, and the drops of blood. Shed for my 
thankless country are requited. But with that surname -- a good memory, 
And witness of the malice and displeasure.</p>

<p>Which thou shouldst bear me. Only that name remains. The cruelty and 
envy of the people, Permitted by our dastard nobles, who Have all forsook me, 
hath devoured the rest; And suffered me by th' voice of slaves to be Whooped 
out of Rome. Now this extremity Hath brought me to thy hearth, not out of hope-- 
Mistake me not -- to save my life; for if I had feared death, of all the men 
i' th' world.</p>

My name is Caius Marcius, who hath done. To thee particularly and to all the Volsces. Great hurt and mischief; thereto witness may. My surname, Coriolanus. The painful service, The extreme dangers, and the drops of blood. Shed for my thankless country are requited. But with that surname — a good memory, And witness of the malice and displeasure.

Which thou shouldst bear me. Only that name remains. The cruelty and envy of the people, Permitted by our dastard nobles, who Have all forsook me, hath devoured the rest; And suffered me by th’ voice of slaves to be Whooped out of Rome. Now this extremity Hath brought me to thy hearth, not out of hope– Mistake me not — to save my life; for if I had feared death, of all the men i’ th’ world.

Styles

<div class="bold">Bold</div>
<strong>This one is Bold too</strong>
<div class="italic">Italic</div>
<em>This one is Italic too</em>
<div class="strike">Strikethrough</div>
<s>This one is Strikethrough too</s>
<div class="small">Small</div>
<div class="big">Big</div>
<div class="xbig">Extra Big</div>
<div class="sans">Sans-Serif </div>
<div class="sans bold">Bold Sans-Serif </div>
<div class="sans big">Big Sans Serif </div>
Bold
This one is Bold too
Italic
This one is Italic too
Strikethrough
This one is Strikethrough too
Small
Big
Extra Big
Sans-Serif
Bold Sans-Serif
Big Sans-Serif

 

Text Alignment

<div class="text-left">Text Left</div>
<div class="text-center">Text Center</div>
<div class="text-right">Text Right</div>
Text Left
Text Center
Text Right

Quotes

[blockquote author="William Shakespeare" quote_sign="true" link="https://pixeldreams.com" new_window="false" text_light="true"]
To be or not to be, that's the question.[/blockquote]
To be or not to be, that’s the question.

Colours

Text Colour

<div class="red">Red</div>
<div class="black">Black</div>
<div class="grey-dark">Dark Grey</div>
<div class="grey">Grey</div>
<div class="grey-light">Light Grey</div>
<div class="white">White</div>
Red
Black
Dark Grey
Grey
Light Grey
White

Background Colour

<div class="bg-red white">Red</div>
<div class="bg-black white">Black</div>
<div class="bg-grey-dark white">Dark Grey</div>
<div class="bg-grey">Grey</div>
<div class="bg-grey-light">Light Grey</div>
<div class="bg-white">White</div>
Red
Black
Dark Grey
Grey
Light Grey
White

Utils

Margin & Padding

To add margin/padding, add the following class:
.{m/p}{direction}-{number}
{m/p} m for margin and p for padding
{direction} is top(t), bottom(b), right(r), left(l)
{number} is 0, 5, 10, up to 100

<div class="mb-5">margin-bottom: 5px</div>
<div class="mt-10">margin-bottom: 10px</div>
<div class="pr-15">padding-right: 15px</div>

Buttons

<a class="button small">Small</a>
<a class="button normal">Normal</a>
<a class="button large">Large</a>
<a class="button large arrow-right">Right</a>
<a class="button bg-white small">Small</a>
<a class="button bg-white normal">Normal</a>
<a class="button bg-white large">Large</a>
<a class="button bg-white large arrow-left">Left</a>
<a class="button bg-outline-black small">Small</a>
<a class="button bg-outline-black normal">Normal</a>
<a class="button bg-outline-black large">Large</a>
<a class="button bg-outline-black large arrow-up">Up</a>
<a class="button bg-outline-white small">Small</a>
<a class="button bg-outline-white normal">Normal</a>
<a class="button bg-outline-white large">Large</a>
<a class="button bg-outline-white large arrow-down">Down</a>
<a class="link" href="#">Normal Link</a>
<a class="link arrow-left" href="#">Arrow Left</a>
<a class="link arrow-right" href="#">Arrow Right</div>
<a class="link arrow-up" href="#">Arrow Up</div>
<a class="link arrow-down" href="#">Arrow Down</div>

Shortcodes

To insert shortcode from the editor, click ‘Insert Shortcode‘ and select the type of shortcode from the dropdown.

Borders, Grids, and Cells

[grid center="true" margin_x="true" margin_y="false" padding_x="false" padding_y="false" class=""]
    [cell small="12" medium="6" large="4"]This is the first cell[/cell]
    [cell small="12" medium="6" large="4"]This is the second cell[/cell]
    [cell small="12" medium="6" large="4"]This is the third cell[/cell] 
[/grid]
This is the first cell
This is the second cell
This is the third cell

Accordion

[accordion multi_expand="false" all_closed="false" class="mb-50"]
    [accordion_item open="false" title="1st Accordion"]This is the first accordion[/accordion_item]
    [accordion_item open="true" title="2nd Accordion"]This is the second accordion[/accordion_item]
    [accordion_item open="true" title="3rd Accordion"]This is the third accordion[/accordion_item] 
[/accordion]

Tabs – Horizontal

[tabs vertical="false" id="example-tabs"]
    [tab_item title="Tab 1"]This is the first tab[/tab_item]
    [tab_item title="Tab 2"]This is the second tab[/tab_item]
    [tab_item title="Tab 3"]This is the third tab[/tab_item]
[/tabs]
This is the first tab
This is the second tab
This is the third tab

Tabs – Vertical

[tabs vertical="true" id="example-tabs"]
    [tab_item title="Tab 1"]This is the first tab[/tab_item]
    [tab_item title="Tab 2"]This is the second tab[/tab_item]
    [tab_item title="Tab 3"]This is the third tab[/tab_item]
[/tabs]
This is the first tab
This is the second tab
This is the third tab

Story

  • Go to Dashboard > Stories
  • Click Add New Story
  • Start populating the content by adding the Title and Stories. Each story can have multiple slides
  • Each slide has the following: Main Title, Sub Title, Layout (Image Only, Text Only or Image + Text)
  • Save and publish the post
  • To insert the story, go to Stories > All Stories, click the shortcode and it will automatically copy the shortcode to the clipboard eg:
    [shortcode id="xxx"]
  • Paste the shortcode to the post/page

Quote Slider

[quote_slider]
 	[quote_item]This is the very first quote[/quote_item]
 	[quote_item author="Author 2"]This is the very second quote[/quote_item]
 	[quote_item author="Author 3"]This is the very third quote[/quote_item]
 	[quote_item author="Author 4"]This is the very fourth quote[/quote_item]
[/quote_slider]

The Author

superadm
View Profile