buttons/typography

[title_row header=”BUTTONS AND TYPOGRAPHY” style=”3″]

[row]
[header type=”2″ line=”crossLine”]BUTTONS[/header]
[/row]
[row]
[half_column]
SMALL
MEDIUM
LARGE
BIG

GREY
ORANGE
DEFAULT
[/half_column]
[half_column]
[sourcecode language=”html”][button size="vlarge" color="vorange"]
LARGE ORANGE[/button][/sourcecode]
[shortcode_params name=”button”]
[/half_column]
[/row]

[row]
[header type=”2″ line=”crossLine”]HEADER[/header]
[/row]
[row]
[half_column]
[header type=”1″]H1[/header]
[header type=”2″]H2[/header]
[header type=”3″]H3[/header]
[header type=”4″]H4[/header]
[header type=”5″]H5[/header]
[header type=”2″ line=”crossLine” strong=”yes”]CROSS LINE HEADER[/header]
[header type=”2″ line=”oneLine” class=””]ONE LINE HEADER[/header]
[header type=”2″ color=”vorange” italic=”yes” class=””]ORANGE ITALIC HEADER[/header]
[/half_column]
[half_column]
[sourcecode language=”html”][[header type="1"]H1[/header]][/sourcecode]
[sourcecode language=”html”][[header type="5"]H5[/header]][/sourcecode]
[sourcecode language=”html”][[header type="2" line="crossLine" strong="yes"]
CROSS LINE HEADER[/header]][/sourcecode]
[sourcecode language=”html”][[header type="2" line="oneLine"]
ONE LINE HEADER[/header]][/sourcecode]
[sourcecode language=”html”][[header type="2" italic="yes" color="vorange"]
ORANGE ITALIC HEADER[/header]][/sourcecode]
[shortcode_params name=”header”]
[/half_column]
[/row]

[row]
[header type=”2″ line=”crossLine”]PARAGRAPH[/header]
[/row]
[row]
[third_column]
[paragraph style=”vlarge”]Sed porttitor luctus gravida. Vestibulum id velit nisl, ac condimentum massa. In hac habitasse platea dictumst. Morbi et mauris sed metus lobortis ullamcorper sit amet in felis.[/paragraph]
[/third_column]
[third_column]
[paragraph style=”vmedium”]Sed porttitor luctus gravida. Vestibulum id velit nisl, ac condimentum massa. In hac habitasse platea dictumst. Morbi et mauris sed metus lobortis ullamcorper sit amet in felis.[/paragraph]
[/third_column]
[third_column]
[paragraph]Sed porttitor luctus gravida. Vestibulum id velit nisl, ac condimentum massa. In hac habitasse platea dictumst. Morbi et mauris sed metus lobortis ullamcorper sit amet in felis.[/paragraph]
[/third_column]
[/row]
[row]
[third_column]
[sourcecode language=”html”][[paragraph style="vlarge"]
Sed porttitor…[/paragraph]][/sourcecode]
[shortcode_params name=”paragraph”]
[/third_column]
[third_column]
[sourcecode language=”html”][[paragraph style="vmedium"]
Sed porttitor…[/paragraph]][/sourcecode]
[/third_column]
[third_column]
[sourcecode language=”html”][[paragraph]
Sed porttitor…[/paragraph]][/sourcecode]
[/third_column]
[/row]

[row]
[header type=”2″ line=”crossLine”]BLOCKQUOTE[/header]
[/row]
[row]
[half_column]
[blockquote author=”Lorem Ipsum”]Sed porttitor luctus gravida. Vestibulum id velit nisl, ac condimentum massa.[/blockquote]
[/half_column]
[half_column][blockquote style=”simple”]Sed porttitor luctus gravida. Vestibulum id velit nisl, ac condimentum massa. In hac habitasse platea dictumst. Morbi et mauris sed metus lobortis ullamcorper sit.[/blockquote]
[/half_column]
[/row]
[row]
[half_column]
[sourcecode language=”html”][[blockquote author="Lorem Ipsum"]
Sed porttitor…[/blockquote]][/sourcecode]
[shortcode_params name=”blockquote”]
[/half_column]
[half_column]
[sourcecode language=”html”][[blockquote style="simple"]
Sed porttitor…[/blockquote]][/sourcecode]
[/half_column]
[/row]

[row]
[header type=”2″ line=”crossLine”]LIST[/header]
[/row]
[row]
[half_column]


[/half_column]
[half_column]

[/half_column]
[/row]
[row]
[half_column]
[sourcecode language=”html”][list style="1"]
<li>Announcement</li>

<li><a href="#">…</a></li>
[/list][/sourcecode]
[shortcode_params name=”list”]
[/half_column]
[half_column]
[sourcecode language=”html”][list style="2"]
<li>Announcement</li>

<li><a href="#">…</a></li>
[/list][/sourcecode]
[/half_column]
[/row]
[row]
[header type=”2″ line=”crossLine”]TABLE[/header]
[/row]
[row][full_column]
[table]

SPECS XEON E5-2687W CORE I7 990X
BRAND Intel Intel
SPEED 3.10GHz 3.47GHz
COST $1800 $1100
CPU MARK 17,872 10,550

[/table][/full_column]
[/row]
[row]
[sourcecode language=”html”][[table]
<table>
<thead>
<tr>
<th>SPECS</th>
<th>XEON E5-2687W</th>
<th>CORE I7 990X</th>
</tr>
</thead>
<tbody>
<tr>
<td>BRAND</td>
<td>Intel</td>
<td>Intel</td>
</tr>
<tr>
<td>SPEED</td>
<td>3.10GHz</td>
<td>3.47GHz</td>
</tr>
<tr>
<td>COST</td>
<td>$1800</td>
<td>$1100</td>
</tr>
<tr>
<td>CPU MARK</td>
<td>17,872</td>
<td>10,550</td>
</tr>
</tbody>
</table>
[/table]][/sourcecode]
[/row]
[row]
[header type=”2″ line=”crossLine”]PRICE LIST[/header]
[/row]
[row]
[third_column]
[pricelist title=”BASIC” price=”39.99″ subprice=”per month” buttonlabel=”SIGN UP”]

Full email support
25GB of storage
5 domains
10 email addresses

[/pricelist]
[/third_column]
[third_column]
[pricelist title=”STANDARD” price=”59.99″ subprice=”per month” buttonlabel=”SIGN UP” style=”distinctive”]

Full email support
50GB of storage
5 domains
20 email addresses

[/pricelist]
[/third_column]
[third_column]
[pricelist title=”PREMIUM” price=”99.99″ subprice=”per month” buttonlabel=”SIGN UP”]

Full email support
100GB of storage
20 domains
email addresses no limit

[/pricelist]
[/third_column]
[/row]
[row]
[half_column]
[sourcecode language=”html”][[pricelist title="PREMIUM" price="99.99"
subprice="per month" buttonlabel="SIGN UP"]
…[/pricelist]][/sourcecode]
[/half_column]
[half_column]
[shortcode_params name=”pricelist”]
[/half_column]
[/row]

[row]
[header type=”2″ line=”crossLine”]DIVIDER[/header]
[/row]
[row]
[two_thirds_column]
[divider]
[/two_thirds_column]
[third_column]
[sourcecode language=”html”][divider][/sourcecode]
[shortcode_params name=”divider”]
[/third_column]
[/row]

[row]
[header type=”2″ line=”crossLine”]BUBBLE[/header]
[/row]
[row]
[quarter_column]
[bubble]123[/bubble]
[/quarter_column]
[quarter_column]
[sourcecode language=”html”][[bubble]123[/bubble]][/sourcecode]
[shortcode_params name=”bubble”]
[/quarter_column]
[/row]