Typography

Primary and secondary styles

The primary1 and secondary2 colours are defined in the template theme settings, while the primary2, primary3 and secondary2, secondary3 colours are calculated using LESS to deliver shades slightly darker and slightly lighter than the original..  The code used to create the blocks below are as follows:

Blocks of colour

These blocks are generated based on the markup below.

<div class="primary1">
<p><strong>Primary1 </strong></p>
<p>Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.</p>
</div>{grid4}

{/grid4} {grid4}

{/grid4} {grid4_last}

{/grid4_last} {grid4}

{/grid4} {grid4}

{/grid4} {grid4_last}

{/grid4_last}

Borders

These blocks are generated based on the markup below.

<div class="primary1 border">
<p><strong>Primary1 </strong></p>
<p>Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.</p>
</div>{grid4}

{/grid4} {grid4}

{/grid4} {grid4_last}

{/grid4_last} {grid4}

{/grid4} {grid4}

{/grid4} {grid4_last}

{/grid4_last}

Rounded

The following items have a class ” rounded” added to them to create the subtle rounded edge.

<div class="primary1 border">
<p><strong>Primary1 </strong></p>
<p>Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.</p>
</div>{grid4}

{/grid4} {grid4}

{/grid4} {grid4_last}

{/grid4_last} {grid4}

{/grid4} {grid4}

{/grid4} {grid4_last}

{/grid4_last}

Other styles and effects

The following classes can be applied to modules and html markup.

{grid4}

{/grid4} {grid4}

{/grid4} {grid4_last}

{/grid4_last}