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.

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="tiny">Tiny</div>
<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 tiny">Tiny Sans-Serif </div>
<div class="sans small">Small Sans-Serif </div>
<div class="sans big">Big Sans Serif </div>
<div class="serif-alt">Serif Alt </div>
<div class="sans-alt">Sans-Serif Alt </div>

<div class="sans tiny bold uppercase ls-1">Letter Spacing 1</div>
<div class="sans tiny bold uppercase ls-3">Letter Spacing 3</div>
<div class="sans tiny bold uppercase ls-5">Letter Spacing 5</div>

<div class="sans lh-09">Line Height 0.9em</div>
<div class="sans lh-1">Line Height 1</div>
<div class="sans lh-15">Line Height 15</div>

Special Style

<div class="sub-text">Subtext</div>

Sub Heading

<div class="sub-heading">Subheading</div>

Text Alignment

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

Drop Cap

<p class="dropcap"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong> Suspendisse 
nec consectetur libero. Curabitur massa mauris, pellentesque semper mauris sit amet, faucibus 
dictum orci. Vestibulum purus massa, pulvinar consequat convallis sit amet, auctor id tortor. 
Praesent vitae tortor purus. Cras rhoncus rhoncus arcu a consectetur. Class aptent taciti 
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis tincidunt diam ut 
orci feugiat hendrerit. Morbi a vestibulum enim. Pellentesque eu felis nec ante feugiat congue 
vel quis ex. Suspendisse lobortis euismod erat. Donec imperdiet enim ac justo maximus, eget 
porttitor dolor lacinia. Nunc in nunc tellus. Curabitur convallis, nisl at pellentesque vehicula, 
turpis ipsum cursus justo, a accumsan ipsum turpis at eros. Nullam lacus est, tempus tincidunt 
ante vitae, dictum vulputate odio. Nulla auctor, mauris quis malesuada euismod, nisl risus 
bibendum sapien, molestie maximus nunc ellus eget turpis. Sed vestibulum, mauris sed consequat 
scelerisque, urna nibh tempor justo, non viverra risus urna eu justo.</p>

 

---

 

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>
<div class="off-white">Off White</div>
<div class="blue">Blue</div>
<div class="blue-bright">Blue Bright</div>
<div class="win-plus">Win Plus</div>

 

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>
<div class="bg-off-white">Off White</div>
<div class="bg-blue">Blue</div>
<div class="bg-blue-bright">Blue Bright</div>
<div class="bg-win-plus">Win Plus</div>

 

---

 

Utils

 

Email Newsletter

[sc name="newsletter-small"][/sc]

 

[sc name="newsletter"][/sc]

 

Links

<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>

 

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-red small">Small</a>
<a class="button bg-red normal">Normal</a>
<a class="button bg-red large">Large</a>
<a class="button bg-red 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="button bg-outline-red small">Small</a>
<a class="button bg-outline-red normal">Normal</a>
<a class="button bg-outline-red large">Large</a>
<a class="button bg-outline-red large arrow-down">Down</a>

<a class="button button-block bg-outline-white arrow-left text-right"><span class="bold block uppercase sans">First line</span><span class="serif">Second line</span></a>
<a class="button button-block bg-outline-black arrow-right"><span class="bold block uppercase sans">First line</span><span class="serif">Second line</span></a>
<a class="button button-block bg-outline-red arrow-up"><span class="bold block uppercase sans">First line</span><span class="serif">Second line</span></a>
<a class="button button-block bg-outline-red arrow-up"><span class="bold block uppercase sans">First line</span><span class="serif">Second line</span></a>

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.

William Shakespeare

[blockquote author="Helen Keller" quote_sign="true" link="https://pixeldreams.com" new_window="false" text_light="true" no_bg_image="true"]
The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.[/blockquote]

The best and most beautiful things in the world cannot be seen or even touched – they must be felt with the heart.

Helen Keller

[blockquote author="Sunday Adelaja" quote_sign="true" link="https://pixeldreams.com" new_window="false" text_light="true" bg_image="https://pixeldreams.com/wp-content/uploads/2022/05/PD-Questions-The-Quantum-Realm-Visual-direction-2022-03-22.png"]
Replace the negative traits of your character by the traits you want to have.[/blockquote]

Replace the negative traits of your character by the traits you want to have.

Sunday Adelaja

[blockquote quote_class="sans-alt" author_class="serif-alt" author="Rick Astley" quote_sign="true" text_light="true"]
Never Gonna Give You Up[/blockquote]

Never Gonna Give You Up

Rick Ashley

Pro Tips

<div class="text-center bg-off-white pt-20 pb-20 pl-30 pr-30 ml-30 mr-30">Remember The 99% Rule</div>

 

Tool Tips

<p>This is a sample of <span data-tooltip tabindex="1" title="It works like magic!"> a tooltip </span>.</p>

This is a sample of a tooltip.

 

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>

 

Horizontal Rule (Bold)

<hr class="bold" />

 

---

 

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" class="bg-grey-light"]This is the first cell[/cell]
    [cell small="12" medium="6" large="4" class="bg-grey-light"]This is the second cell[/cell]
    [cell small="12" medium="6" large="4" class="bg-grey-light"]This is the third cell[/cell] 
[/grid]

 

[grid center="true" margin_x="true" margin_y="true" padding_x="false" padding_y="false" class=""]
    [cell small="12" medium="6" large="4" class="bg-white border"]This is the first box.[/cell]
    [cell small="12" medium="6" large="4" class="bg-white border"]This is the second box.<br>This is the second line.[/cell]
    [cell small="12" medium="6" large="4" class="bg-white border"]This is the third box.[/cell] 
[/grid]

Accordion

[accordion multi_expand="false" all_closed="false" class="mb-50"]
    [accordion_item open="false" title="1st Accordion" title_class="sans-alt red" class="sans"]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]

• 1st Accordion
  This is the first accordion
• 2nd Accordion
  This is the second accordion
• 3rd Accordion
  This is the third 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]

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]

 

Drop Caps

This shortcode will convert the first letter of the first paragraph within the shortcode as a Drop Cap

[dropcap]
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus rutrum libero, 
commodo pulvinar elit viverra vel. Nunc mollis, lorem et tempus porttitor, ante 
lacus mollis lorem, id eleifend magna purus eu quam. Nunc pretium vitae dolor 
quis convallis. Fusce dictum bibendum mollis. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus rutrum libero, 
commodo pulvinar elit viverra vel. Nunc mollis, lorem et tempus porttitor, ante 
lacus mollis lorem, id eleifend magna purus eu quam. Nunc pretium vitae dolor 
quis convallis. Fusce dictum bibendum mollis. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus rutrum libero, 
commodo pulvinar elit viverra vel. Nunc mollis, lorem et tempus porttitor, ante 
lacus mollis lorem, id eleifend magna purus eu quam. Nunc pretium vitae dolor 
quis convallis. Fusce dictum bibendum mollis. </p>
[/dropcap]

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]

Table

Default table:

<table class="{{class_name}}">
    <thead>
        <tr>
            <th width="200">Table Header</th>
            <th>Table Header</th>
            <th width="150">Table Header</th>
            <th width="150">Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
    </tbody>
</table>

Table Header	Table Header	Table Header	Table Header
Content Goes Here	This is longer content Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here

Table with class .bg-black

<table class="bg-black">
    <thead>
        <tr>
            <th width="200">Table Header</th>
            <th>Table Header</th>
            <th width="150">Table Header</th>
            <th width="150">Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
    </tbody>
</table>

Table Header	Table Header	Table Header	Table Header
Content Goes Here	This is longer content Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here

Table with class .bg-red

<table class="bg-red">
    <thead>
        <tr>
            <th width="200">Table Header</th>
            <th>Table Header</th>
            <th width="150">Table Header</th>
            <th width="150">Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
    </tbody>
</table>

Table Header	Table Header	Table Header	Table Header
Content Goes Here	This is longer content Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here

Table with class .bg-grey-dark

<table class="bg-grey-dark">
    <thead>
        <tr>
            <th width="200">Table Header</th>
            <th>Table Header</th>
            <th width="150">Table Header</th>
            <th width="150">Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
    </tbody>
</table>

Table Header	Table Header	Table Header	Table Header
Content Goes Here	This is longer content Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here

 

Adding .zebra will add different colour background to every other row.

<table class="zebra">
    <thead>
        <tr>
            <th width="200">Table Header</th>
            <th>Table Header</th>
            <th width="150">Table Header</th>
            <th width="150">Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
    </tbody>
</table>

Table Header	Table Header	Table Header	Table Header
Content Goes Here	This is longer content Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here

 

Adding a wrapper element with class .table-scroll around your table will enable horizontal scrolling.

<div class="table-scroll">
    <table>
        <thead>
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
            </tr>
            <tr>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
                <td>This is longer content</td>
            </tr>
        </tbody>
    </table>
</div>

 

---

 

Others

 

Password Protected Post

• Go to Dashboard > Posts > All Posts
• Click Edit on a specific post
• Change visibility to Password Protected and type password
• The default setting will show the first 1,000 characters of the post as a teaser.
• To control how the teaser shows, just add <!--more--> to the post manually or click More button. It will show all the content above that code and hide the rest below it.

  This content will turn to a teaser. Lorem ipsum dolor sit amet. 
  <!--more-->
  This content will be hidden since this post is password-protected.
  

• Save and publish the post

Side Navigation

• Go to Dashboard > Posts > All Posts
• Click Edit on a specific post
• To activate the Side Navigation, scroll to Side Navigation section and enable ‘Show Side Navigation’
• Click ‘Add Section’ button. Type or enable:
  • Section Name (e.g.: Section One)
  • Section Link ID (e.g.: #section-one)
    • start with hashtag (#)
    • all lower case
    • no space, can use hyphen(-) or underscore(_)
    • cannot start with number
  • Bold (enable to make the text bold)
  • Line (enable to show line underneath the text)
• To make the link scroll to the corresponding section, type the following code inside the content editor:

  <h3 id="section-one" class="with-line pt-50 mb-10" data-magellan-target="section-one"> Section One </h3>

  • Make sure the section has id and data-magellan-target, and both will have the same value (i.e.: section-one) id="section-one" data-magellan-target="section-one"
• Save and publish the post