Theme Main Colours

Color HTML Code Preview
Gold #c3ac5e
Blue #384e7a
Dark Grey #353736
Light Grey #e9eaee

 

Heading Styles

Headings font: Roboto (A Google Font)

Headings Color: #384e7a

Heading Style HTML TAG Size in Pixels
 

Heading 1

<h1>Custom Heading</h1> 34
 

Heading 2

<h2>Custom Heading</h2> 18
 

Heading 3

<h3>Custom Heading</h3> 16
 

Heading 4

 <h4>Custom Heading</h4> 13
 

Heading 5
<h5>Custom Heading</h5> 12
 

Heading 6
 <h6>Custom Heading</h6> 11

Alert or Notice

General Alert

Your alert message goes here
[alert type="general" border_size="1px" box_shadow="yes" animation_type="0"]Your alert message goes here[/alert]

Error Message

Your alert message goes here
[alert type="error" border_size="1px" box_shadow="yes" animation_type="0"]Your alert message goes here[/alert]

Success Message

Your alert message goes here
[alert type="success" border_size="1px" box_shadow="yes" animation_type="0"]Your alert message goes here[/alert]

Notice Message

Your alert message goes here
[alert type="notice" border_size="1px" box_shadow="yes" animation_type="0"]Your alert message goes here[/alert]

Button

Button Text
[button link="#" color="default" target="_self"]Button Text[/button]

Checklist

  • Your Content Goes Here
  • Your Content Goes Here
  • Your Content Goes Here
[checklist icon="fa-check" iconcolor="" circle="" circlecolor="" size="13px" class="" id=""] [li_item icon=""]Your Content Goes Here[/li_item] [li_item icon=""]Your Content Goes Here[/li_item] [li_item icon=""]Your Content Goes Here[/li_item] [/checklist]

Dropcap

Adrop cap is the first letter of a paragraph that’s of a much bigger size than the rest that follow. The letter formatting is such that the letter drops down to cover the few lines following the first one. The practice of using a large letter to mark the start of a text has been around for almost two thousand years. Illustrated caps increased usability by marking important passages and guiding readers through the text. However, their use in web is limited, but sometimes used as a decorative element. Use drop caps sparingly and only when their use adds value to the design and does not distract the user.

[dropcap color="" boxed="no" boxed_radius="8px" class="" id=""]T[/dropcap]ext at the beginning of a paragraph ….

Flip Boxes or Pathfinder

Frontside Heading Text 1

Frontside content goes here

Backside Heading Text

Backside content goes here. This may also contain a button; see button markup.

Frontside Heading Text 2

Frontside content goes here

Backside Heading Text

Backside content goes here. This may also contain a button; see button markup.

Frontside Heading Text 3

Frontside content goes here

Backside Heading Text

Backside content goes here. This may also contain a button; see button markup.
[flip_boxes columns="3" class="" id=""] [flip_box title_front="Frontside Heading Text 1" title_back="Backside Heading Text" text_front="Frontside content goes here" border_radius="4px" border_size="1px"]Backside content goes here. This may also contain a button; see button markup.[/flip_box] [flip_box title_front="Frontside Heading Text 2" title_back="Backside Heading Text" text_front="Frontside content goes here" border_radius="4px" border_size="1px"]Backside content goes here. This may also contain a button; see button markup.[/flip_box] [flip_box title_front="Frontside Heading Text 3" title_back="Backside Heading Text" text_front="Frontside content goes here" border_radius="4px" border_size="1px"]Backside content goes here. This may also contain a button; see button markup.[/flip_box] [/flip_boxes]

Modals

This is a normal text, but clicking this part of the text will trigger a modal pop up.

Modal trigger text:
[modal_text_link name="uniquemodalindetifier" class="" id=""]This text will trigger a modal popup[/modal_text_link]

Modal Content:
[modal name="uniquemodalidentifier" title="Modal Heading Text" size="small" background="" border_color="" show_footer="yes" class="" id=""]Modal content text[/modal]

Person Card

 
Professor John Smith
Professor John SmithLecturer of Global Health
Use image 192×240. In eget sollicitudin velit. Quisque augue est, pharetra quis mi a, auctor bibendum felis. Etiam a tincidunt leo. Duis vehicula congue congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. In porttitor, magna condimentum suscipit efficitur, magna lacus tempor nulla, tempor fringilla augue ante ac velit. Nullam sed blandit tellus.
[person name="Professor John Smith" title="Lecturer of Global Health" background_color="#f8f8f8" picture="http://" pic_link="" linktarget="_self" pic_style="none" hover_type="none" email="email@uni.mw" facebook="#" twitter="#" instagram="" linkedin="#"][/person]

Separator

[separator style_type="single" top_margin="25" bottom_margin="25" width="90%" alignment="center"]

Table

Column 1 Column 2 Column 3
Item #1 Description Info
Item #2 Description Info
Item #3 Description Info
All Items Description Information
<div class=”table-1″>
<table width=”100%”>
<thead>
<tr>
<th align=”left”>Column 1</th>
<th align=”left”>Column 2</th>
<th align=”left”>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item #1</td>
<td>Description</td>
<td>Info</td>
</tr>
<tr>
<td>Item #2</td>
<td>Description</td>
<td>Info</td>
</tr>
<tr>
<td>Item #3</td>
<td>Description</td>
<td>Info</td>
</tr>
<tr>
<td><strong>All Items</strong></td>
<td><strong>Description</strong></td>
<td><strong>Information</strong></td>
</tr><br />
</tbody>
</table>
</div>

Tabs

First tab content
Second tab content
Third tab content
Fourth tab content
Fifth tab content
First tab content
Second tab content
Third tab content
Fourth tab content
Fifth tab content

Horizontal Tabs

[fusion_tabs design="clean" layout="horizontal" justified="yes" backgroundcolor="" inactivecolor="" bordercolor="" class="" id=""][fusion_tab title="Tab 1" icon=""]First tab content[/fusion_tab][fusion_tab title="Tab 2" icon=""]Second tab content[/fusion_tab][fusion_tab title="Tab 3" icon=""]Third tab content[/fusion_tab][fusion_tab title="Tab 4" icon=""]Fourth tab content[/fusion_tab][fusion_tab title="Tab 5" icon=""]Fifth tab content[/fusion_tab][/fusion_tabs]

Vertical Tabs

[fusion_tabs design="clean" layout="horizontal" justified="yes" backgroundcolor="" inactivecolor="" bordercolor="" class="" id=""][fusion_tab title="Tab 1" icon=""]First tab content[/fusion_tab][fusion_tab title="Tab 2" icon=""]Second tab content[/fusion_tab][fusion_tab title="Tab 3" icon=""]Third tab content[/fusion_tab][fusion_tab title="Tab 4" icon=""]Fourth tab content[/fusion_tab][fusion_tab title="Tab 5" icon=""]Fifth tab content[/fusion_tab][/fusion_tabs]

Tagline Box

Button Text

Heading Text

Insert the description text
This is additional content you can add to the tagline box. This will show below the title and description if one is used.
Button Text
[tagline_box backgroundcolor="" shadow="no" shadowopacity="0.7" border="1px" bordercolor="" highlightposition="top" content_alignment="left" link="http://#Buttonlink" linktarget="_self" modal="" button_size="" button_shape="" button_type="" buttoncolor="" button="Button Text" title="Heading Text" description="Insert the description text" margin_top="" margin_bottom="" animation_type="0" animation_direction="down" animation_speed="0.1" class="" id=""]This is additional content you can add to the tagline box. This will show below the title and description if one is used.[/tagline_box]

Title

This is a Custom Title

[title size="1" content_align="left" style_type="single solid" sep_color="" margin_top="20" margin_bottom="20" class="" id=""]This is a Custom Title[/title]

Toggles

First toggle content …
Second toggle content …
Third toggle content …
Fourth toggle content …

[accordian divider_line="" class="" id=""][toggle title="First Toggle Title" open="no"]First toggle content ...[/toggle][toggle title="Second Toggle Title" open="no"]Second toggle content ...[/toggle][toggle title="Third Toggle Title" open="no"]Third toggle content ...[/toggle][toggle title="Fourth Toggle Title" open="no"]Fourth toggle content ...[/toggle][/accordian]