Custom HTML Elements

Columns

Columns needs main wrapper with gk-columns class and data-column-count attribute:

<div class="gk-columns" data-column-count="2">
<div>
First column content
</div>
<div>
Second column content
</div>
</div>

You can create a layout with 2-5 columns using this structure.

Topbar elements

Social icons are a first element which can be used in the topbar.

The structure of social icons is following:

<div class="gk-social">
<a href="#"><i class="fa fa-rss"></i></a>
<a href="#"><i class="fa fa-flickr"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-vimeo-square"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
</div>

As you can see in general you can use in this list any icon from FontAwesome iconset. More icons you can find on the Typography page.

The promo block is a second available type of blocks.

It has a very simple structure:

<span class="gk-promo">Take and Extra <strong>20% OFF</strong> Your Purchase - Code: <strong>DEC2013</strong></span> </div>

Please remember that you can also use inside the content the strong elements if you want to highlight some phrases.

The last and basic type of blocks have following structure:

<span>Call Customer Services on:  +1-888-222-1155</span> 

Please remember that all span elements inside the topbar have set right float.