KAWWA Markup Pattern Library


eCommerce

Product Sheet Component Information

  • Class name: (k-product-sheet)
  • Version: 1.2

Add to list

The demo below shows an example of how a k-product will be displayed in a product sheet.

To have a product sheet, simply insert your k-product component inside the product sheet block.

In order to style the product sheet correctly, be sure to have on your style-sheet the code for the product template also.

Title of product

Product category

Title of product

Eget velit convallis laoreet consectetuer In dictum est ipsum gravida consequat. Elit Sed magna id congue scelerisque velit convallis laoreet consectetuer In dictum est ipsum gravida consequat. Elit Sed magna id congue scelerisque.

Old price: 50,50 €

50,50 €

-10%

Availability: immediate delivery

HTML5 Plain Code

COPY
  1. <article class="k-product h-product k-product-sheet">
  2. 	<header>
  3. 		<h3 class="p-name fn"><a href="#">Title of product</a></h3>
  4. 		<p class="p-category"><a href="#">Product category</a></p>
  5. 	</header>
  6. 	
  7. 	<p class="photo-data"><a href="#"><img class="u-photo" src="product_main.svg" alt="Title of product" /></a></p>
  8. 	
  9. 	<div class="product-data">
  10. 		<div class="rating">
  11. 			<p class="h-review"><data class="p-rating" value="5"><img src="five-stars.svg" alt="Five stars" /></data></p>
  12. 			<p><a href="#comments">50 comments</a></p>
  13. 		</div>
  14. 		
  15. 		<div class="content k-article">
  16. 			<div class="e-description">
  17. 				<p>Eget velit convallis laoreet consectetuer In dictum est 
  18. 				ipsum gravida consequat. Elit Sed magna id congue scelerisque velit convallis laoreet consectetuer In dictum est 
  19. 				ipsum gravida consequat. Elit Sed magna id congue scelerisque.</p>
  20. 			</div>
  21. 			
  22. 			<ul class="product-info">
  23. 				<li><a href="http://example.com/acme" class="p-brand h-card">ACME Publishing inc.</a></li>
  24. 				<li><strong>Ref.:</strong> 1235A/gray</li>
  25. 				<li><strong>Height:</strong> 65cm</li>
  26. 				<li><strong>Composition:</strong> 100% cotton</li>
  27. 			</ul>
  28. 		</div>
  29. 		
  30. 		<div class="price-data">
  31. 			<p class="old-price">
  32. 				<span class="k-no-display">Old price:</span> 
  33. 				<span aria-label="Old price">50,50 &euro;</span></p>
  34. 			<p><data class="p-price sale" value="50.50">50,50 &euro;</data></p>
  35. 			<p class="extra sale">-10%</p>
  36. 		</div>
  37. 		
  38. 		<div class="buy-zone">
  39. 			<div class="availability">
  40. 				<p><strong>Availability:</strong> immediate delivery</p>
  41. 			</div>
  42. 			<p class="buy"><button>Add to basket</button></p>
  43. 		</div>
  44. 	</div>
  45. </article>

CSS Code

COPY
  1. .k-product-sheet .k-article {margin: 0;}
  2. 
                                
  3. .k-product-sheet .product-data {clear: both;}
  4. 
                                
  5. .k-product-sheet .price-data {
  6. 	text-align: center;
  7. 	margin: 2em 0;
  8. }
  9. 
                                
  10. .k-product-sheet .buy-zone {
  11. 	text-align: center;
  12. 	background: #EEE;
  13. 	padding: 0.5em 1em 0.8em;
  14. 	margin: 2em 0;
  15. }
  16. 
                                
  17. .k-product-sheet .availability {margin-bottom: 0.5em;}
  18. 
                                
  19. @media screen and (min-width: 780px) {
  20. 	.k-product-sheet {position: relative;}
  21. 	
  22. 	.k-product-sheet header {
  23. 		position: absolute;
  24. 		width: auto;
  25. 		top: 0;
  26. 		left: 35%;
  27. 	}
  28. 	.k-product-sheet .p-name {font-size: 2em;}
  29. 	.k-product-sheet .photo-data {
  30. 		float: left;
  31. 		width: 35%;
  32. 		margin-bottom: 2em;
  33. 	}
  34. 	.k-product-sheet .product-data {
  35. 		clear: none;
  36. 		float: left;
  37. 		width: 60%;
  38. 		padding-top: 3em;
  39. 	}
  40. 	.k-product-sheet .price-data {
  41. 		float: left;
  42. 		width: 40%;
  43. 		text-align: left;
  44. 	}
  45. 	.k-product-sheet .price-data p {font-size: 1.5em;}
  46. 	
  47. 	.k-product-sheet .buy-zone {
  48. 		float: right;
  49. 		width: 40%;
  50. 		text-align: right;
  51. 		background: transparent;
  52. 		padding: 0.5em 1em 0.8em;
  53. 		margin: 2em 0;
  54. 	}
  55. 	.k-product-sheet .availability {
  56. 		font-size: 0.8em;
  57. 		margin-bottom: 1em;
  58. 	}
  59. }
  60. 
                                

In order to style the catalog products correctly, be sure to have on your style-sheet the code for the product template also.


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