KAWWA Markup Pattern Library


eCommerce

Product Review Component Information

  • Class name: (k-review)
  • Version: 1.2

Add to list

The Product Review is a list of users' reviews that includes user's rates, user's alias and comments.

This component relies on the "h-review" microformats2 recommendations, with backward campatibility to previous "hreview" specifications.

Five stars christ59
Vestibulum leo auctor sed Cras fermentum sed eros neque tristique pretium. In nibh feugiat convallis felis ac.
Three stars bubblenews
Vestibulum leo auctor sed Cras fermentum sed eros neque tristique pretium. In nibh feugiat convallis felis ac.
Four stars thisisalonglongaliasforauser
Vestibulum leo auctor sed Cras fermentum sed eros neque tristique pretium. In nibh feugiat convallis felis ac.Vestibulum leo auctor sed Cras fermentum sed eros neque tristique pretium. In nibh feugiat convallis felis ac.

HTML5 Plain Code

COPY
  1. <div class="k-review">
  2. 	<dl class="h-review hreview">
  3. 		<dt>
  4. 			<data class="p-rating" value="5"><img src="five-stars.svg" alt="Five stars" /></data>
  5. 			<strong class="p-reviewer h-card">christ59</strong>
  6. 		</dt>
  7. 		<dd class="e-description">
  8. 			Vestibulum leo auctor sed Cras fermentum sed eros neque tristique pretium. 
  9. 			In nibh feugiat convallis felis ac.
  10. 		</dd>
  11. 	</dl>
  12. 	<dl class="h-review">
  13. 		<dt>
  14. 			<data class="p-rating" value="3"><img src="three-stars.svg" alt="Three stars" /></data>
  15. 			<strong class="p-reviewer h-card">bubblenews</strong>
  16. 		</dt>
  17. 		<dd class="e-description">
  18. 			Vestibulum leo auctor sed Cras fermentum sed eros neque tristique pretium. 
  19. 			In nibh feugiat convallis felis ac.
  20. 		</dd>
  21. 	</dl>
  22. 	<dl class="h-review">
  23. 		<dt>
  24. 			<data class="p-rating" value="4"><img src="four-stars.svg" alt="Four stars" /></data>
  25. 			<strong class="p-reviewer h-card">thisisalonglongaliasforauser</strong>
  26. 		</dt>
  27. 		<dd class="e-description">
  28. 			Vestibulum leo auctor sed Cras fermentum sed eros neque tristique pretium. 
  29. 			In nibh feugiat convallis felis ac.Vestibulum leo auctor sed Cras fermentum sed eros neque tristique pretium. 
  30. 			In nibh feugiat convallis felis ac.
  31. 		</dd>
  32. 	</dl>
  33. </div>

CSS Code

COPY
  1. div.k-review {
  2.   margin-bottom: 1em;
  3. }
  4. 
                                
  5. dl.h-review {
  6.   padding: 10px 0;
  7.   border-top: 1px solid #cccccc;
  8. }
  9. dl.h-review dt {
  10.   margin-bottom: 0.5em;
  11. }
  12. dl.h-review .p-rating {
  13.   padding-right: 5px;
  14. }
  15. 
                                
  16. p.average {
  17.   font-size: 1em;
  18.   text-transform: uppercase;
  19.   margin: 0.5em 0;
  20. }
  21. 
                                
  22. @media screen and (min-width: 700px) {
  23.   dl.h-review {
  24.     float: left;
  25.     width: 100%;
  26.   }
  27.   dl.h-review dt {
  28.     float: left;
  29.     width: 20%;
  30.     padding: 0 2% 0 0;
  31.     margin: 0;
  32.     word-wrap: break-word;
  33.   }
  34.   dl.h-review dd {
  35.     float: right;
  36.     width: 76%;
  37.     padding-right: 2%;
  38.     word-wrap: break-word;
  39.   }
  40.   dl.h-review .p-rating {
  41.     display: block;
  42.   }
  43. }
  44. 
                                

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