Posted By

zachharkey on 11/04/11


Tagged


Versions (?)

Styleguide Placeholder HTML


 / Published in: HTML
 

  1. <div class="typo-title">
  2. Headings
  3. </div>
  4.  
  5. <h1>Heading one example</h1>
  6.  
  7. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  8. do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
  9. enim ad minim veniam, quis nostrud exercitation ullamco laboris
  10. nisi ut aliquip ex ea commodo consequat.</p>
  11.  
  12. <h2>Heading two example</h2>
  13.  
  14. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  15. do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
  16. enim ad minim veniam, quis nostrud exercitation ullamco laboris
  17. nisi ut aliquip ex ea commodo consequat.</p>
  18.  
  19. <h3>Heading three example</h3>
  20.  
  21. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  22. do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
  23. enim ad minim veniam, quis nostrud exercitation ullamco laboris
  24. nisi ut aliquip ex ea commodo consequat.</p>
  25.  
  26. <h4>Heading four example</h4>
  27.  
  28. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  29. do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
  30. enim ad minim veniam, quis nostrud exercitation ullamco laboris
  31. nisi ut aliquip ex ea commodo consequat.</p>
  32.  
  33. <h5>Heading five example</h5>
  34.  
  35. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  36. do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
  37. enim ad minim veniam, quis nostrud exercitation ullamco laboris
  38. nisi ut aliquip ex ea commodo consequat.</p>
  39.  
  40. <h6>Heading six example</h6>
  41.  
  42. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  43. do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
  44. enim ad minim veniam, quis nostrud exercitation ullamco laboris
  45. nisi ut aliquip ex ea commodo consequat.<br />
  46. <br />
  47. &nbsp;</p>
  48.  
  49. <div class="typo-title">
  50. Normal Paragraph of text
  51. </div>
  52.  
  53. <p>This is a Normal paragraph of text created with lorem ipsum
  54. text. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  55. sed do eiusmod tempor incididunt ut labore et dolore magna
  56. aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  57. ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href=
  58. "#">This is a link in normal paragraph text</a> Duis aute irure
  59. dolor in reprehenderit in voluptate velit esse cillum dolore eu
  60. fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  61. proident, sunt in culpa qui officia deserunt mollit anim id est
  62. laborum."</p>
  63.  
  64. <p><br />
  65. &nbsp;</p>
  66.  
  67. <div class="typo-title">
  68. Special Tags
  69. </div>
  70.  
  71. This is a blocquote tag example created with lorem ipsum text.
  72. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  73. do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  74. Ut enim ad minim veniam, quis nostrud exercitation ullamco
  75. laboris nisi ut aliquip ex ea commodo consequat.
  76. <pre>
  77. <strong>This is pre tag example:</strong>
  78.  
  79. body {
  80. font-family:Arial,Helvetica,Verdana,"Bitstream Vera Sans",sans-serif;
  81. font-size:81.25%;
  82. line-height:150%;
  83. color:#252525;
  84. background:#ffffff;
  85. }
  86.  
  87. </pre>
  88.  
  89. <p><code><strong>This is code tag example:</strong><br />
  90. body {<br />
  91. &nbsp;&nbsp;font-family:Arial,Helvetica,Verdana,"Bitstream Vera
  92. Sans",sans-serif;<br />
  93. &nbsp;&nbsp;font-size:81.25%;<br />
  94. &nbsp;&nbsp;line-height:150%;<br />
  95. &nbsp; color:#252525;<br />
  96. &nbsp;&nbsp;background:#ffffff;<br />
  97. }</code></p>
  98.  
  99. <p><br />
  100. &nbsp;</p>
  101.  
  102. <div class="typo-title">
  103. List Styles
  104. </div>
  105.  
  106. <div class="clearfix">
  107. <div style="float: left; width: 48%; padding-right: 1%;">
  108. <ol>
  109. <li>This is a sample <strong>Ordered List
  110. Style</strong>.</li>
  111.  
  112. <li>In order to use it, simply use:-</li>
  113.  
  114. <li><strong>&lt;ul&gt;&lt;li&gt;.. Your text goes here
  115. ..&lt;/li&gt;&lt;/ul&gt;</strong></li>
  116. </ol>
  117.  
  118. <ul class="arrow-list">
  119. <li>This is a sample <strong>Arrow List
  120. Style</strong>.</li>
  121.  
  122. <li>In order to use it, simply use:-</li>
  123.  
  124. <li><strong>&lt;ul class="arrow-list"&gt;&lt;li&gt;.. your
  125. text goes here ..&lt;/li&gt;</strong></li>
  126.  
  127. <li>and make your listing looking beautiful.</li>
  128. </ul>
  129. </div>
  130.  
  131. <div style="float: left; width: 48%; padding-right: 1%;">
  132. <ul>
  133. <li>This is a sample <strong>Unordered List
  134. Style</strong>.</li>
  135.  
  136. <li>In order to use it, simply use:-</li>
  137.  
  138. <li><strong>&lt;ol&gt;&lt;li&gt;.. Your text goes here
  139. ..&lt;/li&gt;&lt;/ol&gt;</strong></li>
  140. </ul>
  141.  
  142. <ul class="star-list">
  143. <li>This is a sample <strong>Star List Style</strong>.</li>
  144.  
  145. <li>In order to use it, simply use:-</li>
  146.  
  147. <li><strong>&lt;ul class="star-list"&gt;&lt;li&gt;.. your
  148. text goes here ..&lt;/li&gt;</strong></li>
  149.  
  150. <li>and make your listing looking beautiful.</li>
  151. </ul>
  152. </div>
  153.  
  154. <div style="float: left; width: 48%; padding-right: 1%;">
  155. <ul class="check-list">
  156. <li>This is a sample <strong>Check List
  157. Style</strong>.</li>
  158.  
  159. <li>In order to use it, simply use:-</li>
  160.  
  161. <li><strong>&lt;ul class="check-list"&gt;&lt;li&gt;.. your
  162. text goes here ..&lt;/li&gt;</strong></li>
  163.  
  164. <li>and make your listing looking beautiful.</li>
  165. </ul>
  166. </div>
  167. </div>
  168.  
  169. <p><br />
  170. &nbsp;</p>
  171.  
  172. <div class="typo-title">
  173. Special Messaging Box styles
  174. </div>
  175.  
  176. <div class="status-box">
  177. Status Message Box: Use <strong>&lt;div
  178. class="status-box"&gt;.. Your text goes here
  179. ..&lt;/div&gt;</strong> to create this.
  180. </div>
  181.  
  182. <div class="warning-box">
  183. Warning Message Box: <strong>Use &lt;div
  184. class="warning-box"&gt;.. Your text goes here
  185. ..&lt;/div&gt;</strong> to create this.
  186. </div>
  187.  
  188. <div class="error-box">
  189. Error Message Box: <strong>Use &lt;div class="warning"&gt;..
  190. Your text goes here ..&lt;/div&gt;</strong> to create this.
  191. </div>
  192.  
  193. <div class="info-box">
  194. Info Message Box:. Use <strong>&lt;div class="info-box"&gt;..
  195. Your text goes here ..&lt;/div&gt;</strong> to create this.
  196. </div>
  197.  
  198. <p><br />
  199. &nbsp;</p>
  200.  
  201. <div class="typo-title">
  202. Special Buttons Styles
  203. </div>
  204.  
  205. <p style="margin:0px">Use <strong>small medium large</strong>
  206. class respectively for example for small use small i.e.: -<br />
  207. <strong>&lt;a href="#" class="button blue
  208. small"&gt;&lt;span&gt;Some
  209. Text&lt;/span&gt;&lt;/a&gt;</strong></p>
  210.  
  211. <p style="margin-bottom:0px"><a class="button black small" href=
  212. "#"><span>Some Text</span></a> <a class="button black medium"
  213. href="#"><span>Some Text</span></a> <a class="button black large"
  214. href="#"><span>Some Text</span></a></p>
  215.  
  216. <p style="margin-bottom:0px">Use <strong>&lt;a href="#"
  217. _cke_saved_href="#" class="button blue small"&gt;&lt;span&gt;Some
  218. Text&lt;/span&gt;&lt;/a&gt;</strong></p>
  219.  
  220. <p><a class="button cyan" href="#"><span>Cyan</span></a>
  221. <a class="button blue" href="#"><span>Blue</span></a> <a class=
  222. "button green" href="#"><span>Green</span></a> <a class=
  223. "button orange" href="#"><span>Orange</span></a> <a class=
  224. "button pink" href="#"><span>Pink</span></a> <a class=
  225. "button purple" href="#"><span>Purple</span></a> <a class=
  226. "button red" href="#"><span>Red</span></a> <a class=
  227. "button yellow" href="#"><span>Yellow</span></a> <a class=
  228. "button white" href="#"><span>White</span></a> <a class=
  229. "button gray" href="#"><span>Gray</span></a> <a class=
  230. "button black" href="#"><span>Black</span></a></p>
  231.  
  232. <p><br />
  233. &nbsp;</p>
  234.  
  235. <div class="typo-title">
  236. More Paragraph Styles
  237. </div>
  238.  
  239. <div style="width: 47%; float: left; margin-right: 2.5%;">
  240. <p class="download">Downlod: Use <strong>&lt;p
  241. class="download"&gt;.. Your text goes here
  242. ..&lt;/p&gt;</strong> to create this.</p>
  243.  
  244. <p class="upload">Upload: Use <strong>&lt;p
  245. class="upload"&gt;.. Your text goes here ..&lt;/p&gt;</strong>
  246. to create this.</p>
  247.  
  248. <p class="note">Note: Use <strong>&lt;p class="note"&gt;.. Your
  249. text goes here ..&lt;/p&gt;</strong> to create this.</p>
  250.  
  251. <p class="tip">Tip: Use <strong>&lt;p class="tip"&gt;.. Your
  252. text goes here ..&lt;/p&gt;</strong> to create this.</p>
  253.  
  254. <p class="word">Word: Use <strong>&lt;p class="word"&gt;.. Your
  255. text goes here ..&lt;/p&gt;</strong> to create this.</p>
  256.  
  257. <p class="excel">Excel: Use <strong>&lt;p class="excel"&gt;..
  258. Your text goes here ..&lt;/p&gt;</strong> to create this.</p>
  259.  
  260. <p class="pdf">Pdf: Use <strong>&lt;p class="pdf"&gt;.. Your
  261. text goes here ..&lt;/p&gt;</strong> to create this.</p>
  262.  
  263. <p class="compressed">Compressed: Use <strong>&lt;p
  264. class="compressed"&gt;.. Your text goes here
  265. ..&lt;/p&gt;</strong> to create this.</p>
  266.  
  267. <p class="user">User: Use <strong>&lt;p class="user"&gt;.. Your
  268. text goes here ..&lt;/p&gt;</strong> to create this.</p>
  269.  
  270. <p class="comment">Comment: Use <strong>&lt;p
  271. class="comment"&gt;.. Your text goes here ..&lt;/p&gt;</strong>
  272. to create this.</p>
  273.  
  274. <p class="alert">Alert: Use <strong>&lt;p class="alert"&gt;..
  275. Your text goes here ..&lt;/p&gt;</strong> to create this.</p>
  276.  
  277. <p class="info">Info: Use <strong>&lt;p class="info"&gt;.. Your
  278. text goes here ..&lt;/p&gt;</strong> to create this.</p>
  279. </div>
  280.  
  281. <div style="width: 47%; float: left; margin-right: 2.5%;">
  282. <p class="check">Check: Use <strong>&lt;p class="check"&gt;..
  283. Your text goes here ..&lt;/p&gt;</strong> to create this.</p>
  284.  
  285. <p class="arrow">Arrow: Use <strong>&lt;p class="arrow"&gt;..
  286. Your text goes here ..&lt;/p&gt;</strong> to create this.</p>
  287.  
  288. <p class="star">Star: Use <strong>&lt;p class="star"&gt;.. Your
  289. text goes here ..&lt;/p&gt;</strong> to create this.</p>
  290.  
  291. <p class="email">Email: Use <strong>&lt;p class="email"&gt;..
  292. Your text goes here ..&lt;/p&gt;</strong> to create this.</p>
  293.  
  294. <p class="mobile">Mobile: Use <strong>&lt;p
  295. class="mobile"&gt;.. Your text goes here ..&lt;/p&gt;</strong>
  296. to create this.</p>
  297.  
  298. <p class="tag">Tag: Use <strong>&lt;p class="tag"&gt;.. Your
  299. text goes here ..&lt;/p&gt;</strong> to create this.</p>
  300.  
  301. <p class="cart">Cart: Use <strong>&lt;p class="cart"&gt;.. Your
  302. text goes here ..&lt;/p&gt;</strong> to create this.</p>
  303.  
  304. <p class="home">Home: Use <strong>&lt;p class="home"&gt;.. Your
  305. text goes here ..&lt;/p&gt;</strong> to create this.</p>
  306.  
  307. <p class="key">Key: Use <strong>&lt;p class="key"&gt;.. Your
  308. text goes here ..&lt;/p&gt;</strong> to create this.</p>
  309.  
  310. <p class="lock">Lock: Use <strong>&lt;p class="lock"&gt;.. Your
  311. text goes here ..&lt;/p&gt;</strong> to create this.</p>
  312.  
  313. <p class="image">Image: Use <strong>&lt;p class="image"&gt;..
  314. Your text goes here ..&lt;/p&gt;</strong> to create this.</p>
  315.  
  316. <p class="video">Video: Use <strong>&lt;p class="video"&gt;..
  317. Your text goes here ..&lt;/p&gt;</strong> to create this.</p>
  318. </div>
  319.  
  320. <div class="clearfix" style="clear:both;">
  321. <p>&nbsp;</p>
  322. </div>
  323.  

Report this snippet  

You need to login to post a comment.