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
[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 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 hereBackside Heading Text
Backside content goes here. This may also contain a button; see button markup.Frontside Heading Text 2
Frontside content goes hereBackside Heading Text
Backside content goes here. This may also contain a button; see button markup.Frontside Heading Text 3
Frontside content goes hereBackside 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
 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]