KAWWA Markup Pattern Library


Site Utilities

Orientation Aid Component Information

  • Class name: (k-orientation-aid)
  • Version: 1.0

Add to list

Simple, optional orientation aids to go back to previous page or to go back to top of the current page.

HTML5 Plain Code

COPY
  1. <div class="k-orientation-aid">
  2. 	<p class="go-back"><a href="#" title="Go back to previous page">Back</a></p>
  3. 	<p class="go-top"><a href="#container" title="Go to the top of the page">Top</a></p>
  4. </div>

CSS Code

COPY
  1. div.k-orientation-aid {
  2. 	float: left;
  3. 	width: 100%;
  4. 	margin-top: 1em;
  5. }
  6. 
                                
  7. 	div.k-orientation-aid p {
  8. 		font: 0.8em open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  9. 		text-transform: uppercase;
  10. 	}
  11. 
                                
  12. 	p.go-back {float: left; width: 45%;}
  13. 	p.go-top {float: right; width: 45%; text-align: right;}
  14. 
                                
  15. 		p.go-back:before {content: "\21A4 \00A0"; font-size: 120%;}
  16. 		p.go-top:after {content: "\00A0 \21A5"; font-size: 120%;}
  17. 
                                
  18. 		div.k-orientation-aid a, div.k-orientation-aid a:link, div.k-orientation-aid a:visited {
  19. 			text-decoration: none;
  20. 		}
  21. 
                                
  22. 
                                

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