Library

All nitty gritty about our brand
Index

 

Typography

 

 

Headings

H1

H2

H3

H4

 

Body

 

You need not add a paragraph tag, unless you’d like to create additional styles. When doing so, the html code is: <p> add text inside, and close with: </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

.bold
.italic
.small
.big
.xbig
.sans
.sans .big
.sans .bold

 

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

.red
.black
.grey-dark
.grey
.grey-light
.white

 

 

Background Colour

.bg-red
.bg-black
.bg-grey-dark
.bg-grey
.bg-grey-light
.bg-white

 


 

 

Utils

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

  • .mb-5 (margin-bottom: 5px)
  • .mt-10 (margin-top: 10px)
  • .pr-15 (padding-right: 15px)

Buttons

.button.small

small

.button

normal

.button.large

large

.button.arrow-right

large

.button.bg-white.small

small

.button.bg-white

normal

.button.bg-white.large

large

.button.arrow-left

large

.button.bg-outline-black.small

small

.button.bg-outline-black

normal

.button.bg-outline-black.large

large

.button.arrow-up

large

.button.bg-outline-white.small

small

.button.bg-outline-white

normal

.button.bg-outline-white.large

large

.button.arrow-down

large

.link

Shortcodes

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

Borders, Grids, and Cells

.border

 

[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

The Author

superadm
View Profile