TYPOGRAPHY
- Warnings
- Headers
- Icons
- Tooltips
- Highlights
- Code
- Unordered lists
- Ordered lists
- Numblocks
- Blocks
- Bubbles
- Legends
- Abbrs and acronyms
- Dropcaps
- Blockquotes
- Floated blocks
- Social icons
- Typography elements
| info1 | <p class="gkInfo1">Your info message goes here!</p> |
| info2 | <p class="gkInfo2">Your info message goes here!</p> |
| tips1 | <p class="gkTips1">Your info message goes here!</p> |
| tips2 | <p class="gkTips2">Your info message goes here!</p> |
| warning1 | <p class="gkWarning1">Your info message goes here!</p> |
| warning2 | <p class="gkWarning2">Your info message goes here!</p> |
| H1 | <h1>Heading 1</h1> |
| H2 | <h2>Heading 1</h2> |
| H3 | <h3>Heading 1</h3> |
| H4 | <h4>Heading 1</h4> |
| head1 | <p class="gkHeadline">Your Headline</p><p class="gkSubHeadline">Your Subheadline</p> |
| head2 | <p class="gkSmallHeadline">Small Headline</p><p class="gkLargeHeadline">Large Headline</p> |
| gkfile1 | <p class="gkfile1">Your message goes here!</p> |
| gkfile2 | <p class="gkfile2">Your message goes here!</p> |
| gksearch | <p class="gksearch">Your message goes here!</p> |
| gkzoomminus | <p class="gkzoomminus">Your message goes here!</p> |
| gkzoomplus | <p class="gkzoomplus">Your message goes here!</p> |
| gkerror | <p class="gkerror">Your message goes here!</p> |
| gktick | <p class="gktick">Your message goes here!</p> |
| gkbook | <p class="gkbook">Your message goes here!</p> |
| gkmap | <p class="gkmap">Your message goes here!</p> |
| gktag | <p class="gktag">Your message goes here!</p> |
| gkstats | <p class="gkstats">Your message goes here!</p> |
| gkstar | <p class="gkstar">Your message goes here!</p> |
| gkribbon | <p class="gkribbon">Your message goes here!</p> |
| gknav | <p class="gknav">Your message goes here!</p> |
| gkgraph | <p class="gkgraph">Your message goes here!</p> |
| gkflash | <p class="gkflash">Your message goes here!</p> |
| gklocation | <p class="gklocation">Your message goes here!</p> |
| gklocationplus | <p class="gklocationplus">Your message goes here!</p> |
| gklocationminus | <p class="gklocationminus">Your message goes here!</p> |
| gkbulb | <p class="gkbulb">Your message goes here!</p> |
| class | <a class="gkTooltip" href="#">Classic Tooltip Anchor<span class="classic">Tooltip message goes here !</span></a> |
| critical | <a class="gkTooltip" href="#">Critical Tooltip<span class="customTooltip criticalTooltip"><em>Critical Tooltip</em>Tooltip message goes here!</span></a> |
| help | <a class="gkTooltip" href="#">Help<span class="customTooltip helpTooltip"><em>Help</em>Tooltip message goes here!</span></a> |
| information | <a class="gkTooltip" href="#">Information<span class="customTooltip infoTooltip"><em>Information</em>Tooltip message goes here!</span></a> |
| warning | <a class="gkTooltip" href="#">Warning<span class="customTooltip warningTooltip"><em>Warning</em>Tooltip message goes here!</span></a> |
| highlight-1 | <span class="gkHighlight1">Your highlight phrase goes here!</span> |
| highlight-2 | <span class="gkHighlight2">Your highlight phrase goes here!</span> |
| highlight-3 | <span class="gkHighlight3">Your highlight phrase goes here!</span> |
| highlight-4 | <span class="gkHighlight4">Your highlight phrase goes here!</span> |
| highlight-5 | <span class="gkHighlight5">Your highlight phrase goes here!</span> |
| pre | <pre>code</pre> |
| code1 | <div class="gkCode1">code</div> |
| code2 | <div class="gkCode2">code</div> |
| code3 | <div class="gkCode3">code</div> |
| bullet1 | <ul class="gkBullet1"><li>Element</li></ul> |
| bullet2 | <ul class="gkBullet2"><li>Element</li></ul> |
| bullet3 | <ul class="gkBullet3"><li>Element</li></ul> |
| bullet4 | <ul class="gkBullet4"><li>Element</li></ul> |
| circle1 | <ul class="gkCircle1"><li>Element</li></ul> |
| circle2 | <ul class="gkCircle2"><li>Element</li></ul> |
| square1 | <ul class="gkSquare1"><li>Element</li></ul> |
| square2 | <ul class="gkSquare2"><li>Element</li></ul> |
| roman | <ol class="gkRoman"><li>Element</li></ol> |
| dec | <ol class="gkDec"><li>Element</li></ol> |
| alpha | <ol class="gkAlpha"><li>Element</li></ol> |
| decimalLeadingZero | <ol class="gkDecimalLeadingZero"><li>Element</li></ol> |
| num-1 | <p class="numblocks num-1"><span>here goes a number</span>text of element</p> |
| num-2 | <p class="numblocks num-1"><span>here goes a number</span>text of element</p> |
| num-3 | <p class="numblocks num-1"><span>here goes a number</span>text of element</p> |
| block1 | <div class="gkblock-1">content here...</div> |
| block2 | <div class="gkblock-2">content here...</div> |
| block3 | <div class="gkblock-3">content here...</div> |
| block4 | <div class="gkblock-4">content here...</div> |
| block5 | <div class="gkblock-5">content here...</div> |
| block6 | <div class="gkblock-6">content here...</div> |
| block7 | <div class="gkblock-7">content here...</div> |
| block8 | <div class="gkblock-8">content here...</div> |
| block9 | <div class="gkblock-9">content here...</div> |
| bubble1 | <div class="bubble-1">content here...<cite>Author here</cite></div> |
| bubble2 | <div class="bubble-2">content here...<cite>Author here</cite></div> |
| bubble3 | <div class="bubble-3">content here...<cite>Author here</cite></div> |
| bubble4 | <div class="bubble-4">content here...<cite>Author here</cite></div> |
| bubble5 | <div class="bubble-5">content here...<cite>Author here</cite></div> |
| bubble6 | <div class="bubble-6">content here...<cite>Author here</cite></div> |
| legend1 | <div class="gkLegend1"> <h4> Title </h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> |
| legend2 | <div class="gkLegend2"> <h4> Title </h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> |
| legend3 | <div class="gkLegend3"> <h4> Title </h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> |
| legend4 | <div class="gkLegend4"> <h4> Title </h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> |
| abbr | <abbr title="Here goes full word or phrase">here goes an abbreviation</abbr> |
| acronym | <acronym title="Here goes full phrase">here goes an acronym</acronym> |
| dropcap1 | <p><span class="gkDropcap1">t</span> to make the first letter larger</p> |
| dropcap2 | <p><span class="gkDropcap2">t</span> to make the first letter larger</p> |
| dropcap3 | <p><span class="gkDropcap3">t</span> to make the first letter larger</p> |
| blockquote1 | <blockquote><div class="gkBlockquote1"><div>Your quoted text goes here!</div></div></blockquote> |
| blockquote2 | <blockquote><div class="gkBlockquote2"><div>Your quoted text goes here!</div></div></blockquote> |
| blockquote3 | <blockquote><div class="gkBlockquote3"><div>Your quoted text goes here!</div></div></blockquote> |
| blockquote4 | <blockquote><div class="gkBlockquote4"><div>Your quoted text goes here!</div></div></blockquote> |
| blockTextLeft | <span class="gkBlockTextLeft">Block of text</span> |
| blockTextRight | <span class="gkBlockTextRight">Block of text</span> |
| blockTextCenter | <span class="gkBlockTextCenter">Block of text</span> |
| gkFB | <a class="gkFb" href="#">Facebook</a> |
| gkTwitter | <a class="gkTwitter" href="#">Twitter</a> |
| gkPlus | <a class="gkGplus" href="#">Google+</a> |
| gkRss | <a class="gkRss" href="#">RSS</a> |
| gkTopList | <ol class="gkTopList"><li>Iron Brigade</li><li>Hero Academy</li><li>Orcs Must Die 2</li><li>A Virus Named Tom</li><li>The Political Machine 2012</li></ol> |