[ KAWWA PORTAL ] Components : Product Template

eCommerce

Product Template

Class name: (k-product)
Version: 1.2

The "Product template" — which can be copied here below – groups most of the identifiable product data based on the current "h-product" microformat2 specifications, independently of the type of product you're displaying :

Product title
Product category
Main picture
Extras (new/promo)
Product description
Product info
Availability
Rating
Discount info
Old Price/Price data
Add to basket link

The order in which the product data appear in the HTML template is not relevant, as long as the CSS takes the placement changes in account.

The demonstration below is just a display of all product data. It is not a defined layout. For examples on specific displays of the product block and its style, please check the "Product catalog" or the "Product Sheet" components.

For backward compatibility purposes, we've kept the previous "hproduct" microformats classes.

Demo
Snippets

Title of product

Product category

50 comments

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.

Ref.: 1235A/gray
Height: 65cm
Composition: 20% cotton/80% wool

Old price : 50,50 €
50,50 €

Availability : immediate delivery

HTML5 Plain Code

COPY

<article class="h-product hproduct k-product">

```
	<header>
```

		<h3 class="p-name fn">Title of product</h3>

		<p class="p-category"><a href="#">Product category</a></p>

```
	</header>
```
```
	<div class="photo-data">
```

		<p><a href="#"><img class="u-photo" src="product_05.svg" alt="Title of product" /></a></p>

```
	</div>
```
```
	<div class="product-data">
```
```
		<p class="rating"> 
```

			<data class="p-rating" value="3"><img src="three-stars.svg" alt="Three stars" /></data>

			<a href="#comments" title="See what other customers are saying">50 comments</a></p>

		<p class="e-description description">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.</p>

```
		<ul class="product-info">
```

			<li><strong>Ref.:</strong> 1235A/gray</li>

			<li><strong>Height:</strong> 65cm</li>

			<li><strong>Composition:</strong> 20% cotton/80% wool</li>

```
		</ul>
```
```
		<div class="price-data">
```
```
			<p class="all-prices">
```

				<span class="hidden">Old price :</span>

				<span class="old-price" title="Old price">50,50 &euro;</span><br />

				<data class="price p-price sale">50,50 &euro;</data></p>

```
		</div>
```
```
		<div class="buyZone">
```
```
			<div class="availability">
```

				<p><strong>Availability :</strong> immediate delivery</p>

```
			</div>
```

			<p class="buy"><button type="button">Add to basket</button></p>

```
		</div>
```
```
	</div>
```
```
</article>
```

CSS Code

COPY

/* Contains declarations of properties shared by all kinds of product displays */

```
.k-product {
```
```
  position: relative;
```
```
}
```
```
.k-product header {
```
```
  margin-bottom: 2em;
```
```
}
```

.k-product .p../img/k-theme0/image_examples/ {

```
  text-transform: none;
```
```
  margin: 0;
```
```
}
```
```
/* --- PRODUCT DATA --- */
```
```
/* --- Rating --- */
```
```
.rating {
```
```
  text-align: right;
```
```
  margin: 1em 0;
```
```
}
```
```
.rating p {
```
```
  display: inline;
```
```
  font-size: 0.8em;
```
```
}
```
```
.rating p:first-child {
```
```
  position: relative;
```
```
  top: 2px;
```
```
  right: 5px;
```
```
}
```
```
.rating a, .rating a:link {
```
```
  color: #050505;
```
```
}
```
```
/* Price data */
```
```
.p-price {
```
```
  font-size: 1.5em;
```
```
  font-weight: bold;
```
```
  white-space: nowrap;
```
```
}
```
```
.old-price {
```
```
  color: inherit;
```
```
  text-decoration: line-through;
```
```
}
```
```
/* Extra prices info */
```

p.extra {background: rgba(255, 255, 255, 0.8);}

```
.sale {color: #C60;}
```
```
p.sale::before {
```
```
  position: relative;
```
```
  top: 1px;
```
```
  content: "\263B  ";
```
```
  line-height: 1.5;
```
```
  font-size: 110%;
```
```
}
```
```
@media screen and (min-width: 600px) {
```
```
  p.sale::before {
```
```
    display: block;
```
```
    top: 5px;
```
```
    line-height: 1;
```
```
    font-size: 250%;
```
```
  }
```
```
}
```
```
.new {
```
```
  color: #690;
```
```
}
```
```
p.new::before {
```
```
  position: relative;
```
```
  top: 1px;
```
```
  content: "\272A  ";
```
```
  line-height: 1.5;
```
```
  font-size: 110%;
```
```
}
```
```
@media screen and (min-width: 600px) {
```
```
  p.new::before {
```
```
    display: block;
```
```
    top: 5px;
```
```
    line-height: 1;
```
```
    font-size: 250%;
```
```
  }
```
```
}
```
```
/* Buy zone */
```
```
.availability {
```
```
  font-size: 0.85em;
```
```
}
```
```
/* --- ADD TO BASKET BUTTON --- */
```
```
p.buy {
```
```
  line-height: 1;
```
```
  margin: 1em 0;
```
```
}
```

p.buy a, p.buy a:link, p.buy a:visited, p.buy button {

```
  display: inline-block;
```
```
  text-decoration: none;
```

  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);

```
  color: #FFF;
```
```
  background: #a40800;
```
```
  padding: 0.4em 1.3em 0.6em;
```
```
  border-radius: 3px;
```
```
  border: 1px solid #a40800;
```

  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);

```
  cursor: pointer;
```
```
}
```

p.buy a:hover, p.buy a:focus, p.buy button:hover, p.buy button:focus {

```
  color: #FFF;
```
```
  background: black;
```
```
  border: 1px solid black;
```
```
  box-shadow: none;
```
```
}
```

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

KAWWA Markup Pattern Library

eCommerce

Product Template

Title of product

HTML5 Plain Code

CSS Code

IE Backward Compatibility

Download List (0)

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce