KAWWA Markup Pattern Library


Site Utilities

Tools links Component Information

  • Class name: (k-tools-list )
  • Version: 1.0

Add to list

This component designs a list of links pointing to general site tools. It may be placed either in the pages' header or footer.

HTML5 Plain Code

COPY
  1. <!-- This block may be placed on the "k-tools" block -->
  2. <ul class="k-tools-list">
  3. 	<li><a href="#">Contact us</a></li>
  4. 	<li><a href="#">FAQ</a></li>
  5. 	<li><a href="#">Site map</a></li>
  6. </ul>

CSS Code

COPY
  1. div.k-tools {}
  2. 
                                
  3. ul.k-tools-list {
  4. 	float: right;
  5. 	width: auto;
  6. 	padding: 1em 2% 0;
  7. }
  8. 
                                
  9. 	ul.k-tools-list li {
  10. 		display: inline;
  11. 		font-size: 0.65em;
  12. 		text-transform: uppercase;
  13. 		color: #999;
  14. 		background: transparent;
  15. 		padding: 2em 0.2em 0.3em;
  16. 	}
  17. 	ul.k-tools-list li:before {content: "\25CF \00A0 \00A0 ";}
  18. 
                                
  19. 	ul.k-tools-list a, ul.k-tools-list a:link {
  20. 		text-decoration: none;
  21. 	}
  22. 	ul.k-tools-list a:hover, ul.k-tools-list a:focus {text-decoration: underline;}
  23. 
                                
  24. 	/* Exceptions */
  25. 
                                
  26. 	footer[role=contentinfo] ul.k-tools-list, #footer ul.k-tools-list {
  27. 		float: none;
  28. 		padding: 0.5em 0 1em 0.5em;
  29. 		margin: -1em 0 1em;
  30. 		border-left: 1px solid #FFF;
  31. 	}
  32. 	footer[role=contentinfo] ul.k-tools-list li, #footer ul.k-tools-list li {
  33. 		display: block;
  34. 		padding-top: 0.5em;
  35. 	}
  36. 
                                

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce