[ KAWWA PORTAL ] Components : Product Sheet

eCommerce

Product Sheet

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

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.

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.

ACME Publishing inc.
Ref.: 1235A/gray
Height: 65cm
Composition: 100% cotton

Old price: 50,50 €

50,50 €

-10%

Availability: immediate delivery

HTML5 Plain Code

COPY

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

```
	<header>
```

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

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

```
	</header>
```
```
	
```

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

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

			<p class="h-review"><data class="p-rating" value="5"><img src="five-stars.svg" alt="Five stars" /></data></p>

			<p><a href="#comments">50 comments</a></p>

```
		</div>
```
```
		
```
```
		<div class="content k-article">
```
```
			<div class="e-description">
```

				<p>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>

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

				<li><a href="http://example.com/acme" class="p-brand h-card">ACME Publishing inc.</a></li>

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

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

				<li><strong>Composition:</strong> 100% cotton</li>

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

				<span class="k-no-display">Old price:</span>

				<span aria-label="Old price">50,50 &euro;</span></p>

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

```
			<p class="extra sale">-10%</p>
```
```
		</div>
```
```
		
```
```
		<div class="buy-zone">
```
```
			<div class="availability">
```

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

```
			</div>
```

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

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

CSS Code

COPY

.k-product-sheet .k-article {margin: 0;}

.k-product-sheet .product-data {clear: both;}

```
.k-product-sheet .price-data {
```
```
	text-align: center;
```
```
	margin: 2em 0;
```
```
}
```
```
.k-product-sheet .buy-zone {
```
```
	text-align: center;
```
```
	background: #EEE;
```
```
	padding: 0.5em 1em 0.8em;
```
```
	margin: 2em 0;
```
```
}
```

.k-product-sheet .availability {margin-bottom: 0.5em;}

```
@media screen and (min-width: 780px) {
```
```
	.k-product-sheet {position: relative;}
```
```
	
```
```
	.k-product-sheet header {
```
```
		position: absolute;
```
```
		width: auto;
```
```
		top: 0;
```
```
		left: 35%;
```
```
	}
```

	.k-product-sheet .p-name {font-size: 2em;}

```
	.k-product-sheet .photo-data {
```
```
		float: left;
```
```
		width: 35%;
```
```
		margin-bottom: 2em;
```
```
	}
```
```
	.k-product-sheet .product-data {
```
```
		clear: none;
```
```
		float: left;
```
```
		width: 60%;
```
```
		padding-top: 3em;
```
```
	}
```
```
	.k-product-sheet .price-data {
```
```
		float: left;
```
```
		width: 40%;
```
```
		text-align: left;
```
```
	}
```

	.k-product-sheet .price-data p {font-size: 1.5em;}

```
	
```
```
	.k-product-sheet .buy-zone {
```
```
		float: right;
```
```
		width: 40%;
```
```
		text-align: right;
```
```
		background: transparent;
```
```
		padding: 0.5em 1em 0.8em;
```
```
		margin: 2em 0;
```
```
	}
```
```
	.k-product-sheet .availability {
```
```
		font-size: 0.8em;
```
```
		margin-bottom: 1em;
```
```
	}
```
```
}
```

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

KAWWA Markup Pattern Library

eCommerce

Product Sheet

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