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:
[code]<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>[/code]
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:
[code]<span class=”gk-promo”>Take and Extra <strong>20% OFF</strong> Your Purchase – Code: <strong>DEC2013</strong></span> </div>[/code]
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:
[code]<span>Call Customer Services on: +1-888-222-1155</span> [/code]
Please remember that all span elements inside the topbar have set right float.