extends template block title title GroundworkCSS Layouts: Ecommerce block content .container .pad-left.pad-right h1.AverageSans.zero Example Layouts: Ecommerce p An adaptive ecommerce layout .align-right.padded a.gap-right(href="#") | My Account i.icon-user a.gap-right(href="#") | View Cart i.icon-shopping-cart a(href="#") | Sign Out i.icon-signout .row aside.one.fifth.padded nav.vertical.menu(data-label="Shop by Category") ul(style="display:block;") li.one.whole a Nav item #1 li.one.whole a Nav item #2 li.one.whole a Nav item #3 li.one.whole a Nav item #4 li.one.whole a Nav item #5 article.four.fifths .row .one.fourth.three-up-small-tablet.two-up-mobile.padded .info.callout h4.responsive.align-center.zero(data-compression="7", data-max="20") Product 1 img(src="http://placehold.it/300x300/2ecc71/ffffff/&text=Product+1") p.truncate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p $8.00 USD i.icon-shopping-cart.pull-right.large .one.fourth.three-up-small-tablet.two-up-mobile.padded .info.callout h4.responsive.align-center.zero(data-compression="7", data-max="20") Product 2 img(src="http://placehold.it/300x300/3498db/ffffff/&text=Product+2") p.truncate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p $8.00 USD i.icon-shopping-cart.pull-right.large .one.fourth.three-up-small-tablet.two-up-mobile.padded .info.callout h4.responsive.align-center.zero(data-compression="7", data-max="20") Product 3 img(src="http://placehold.it/300x300/9b59b6/ffffff/&text=Product+3") p.truncate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p $8.00 USD i.icon-shopping-cart.pull-right.large .one.fourth.three-up-small-tablet.two-up-mobile.padded .info.callout h4.responsive.align-center.zero(data-compression="7", data-max="20") Product 4 img(src="http://placehold.it/300x300/f1c40f/ffffff/&text=Product+4") p.truncate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p $8.00 USD i.icon-shopping-cart.pull-right.large .one.fourth.three-up-small-tablet.two-up-mobile.padded .info.callout h4.responsive.align-center.zero(data-compression="7", data-max="20") Product 5 img(src="http://placehold.it/300x300/e67e22/ffffff/&text=Product+5") p.truncate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p $8.00 USD i.icon-shopping-cart.pull-right.large .one.fourth.three-up-small-tablet.two-up-mobile.padded .info.callout h4.responsive.align-center.zero(data-compression="7", data-max="20") Product 6 img(src="http://placehold.it/300x300/e74c3c/ffffff/&text=Product+6") p.truncate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p $8.00 USD i.icon-shopping-cart.pull-right.large .one.fourth.three-up-small-tablet.two-up-mobile.padded .info.callout h4.responsive.align-center.zero(data-compression="7", data-max="20") Product 7 img(src="http://placehold.it/300x300/f02475/ffffff/&text=Product+7") p.truncate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p $8.00 USD i.icon-shopping-cart.pull-right.large .one.fourth.three-up-small-tablet.two-up-mobile.padded .info.callout h4.responsive.align-center.zero(data-compression="7", data-max="20") Product 8 img(src="http://placehold.it/300x300/1abc9c/ffffff/&text=Product+8") p.truncate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p $8.00 USD i.icon-shopping-cart.pull-right.large .one.fourth.three-up-small-tablet.two-up-mobile.padded .info.callout h4.responsive.align-center.zero(data-compression="7", data-max="20") Product 9 img(src="http://placehold.it/300x300/34495e/ffffff/&text=Product+9") p.truncate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p $8.00 USD i.icon-shopping-cart.pull-right.large .one.fourth.three-up-small-tablet.two-up-mobile.padded .info.callout h4.responsive.align-center.zero(data-compression="7", data-max="20") Product 10 img(src="http://placehold.it/300x300/2ecc71/ffffff/&text=Product+10") p.truncate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p $8.00 USD i.icon-shopping-cart.pull-right.large .one.fourth.three-up-small-tablet.two-up-mobile.padded .info.callout h4.responsive.align-center.zero(data-compression="7", data-max="20") Product 11 img(src="http://placehold.it/300x300/3498db/ffffff/&text=Product+11") p.truncate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p $8.00 USD i.icon-shopping-cart.pull-right.large .one.fourth.three-up-small-tablet.two-up-mobile.padded .info.callout h4.responsive.align-center.zero(data-compression="7", data-max="20") Product 12 img(src="http://placehold.it/300x300/f1c40f/ffffff/&text=Product+12") p.truncate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p $8.00 USD i.icon-shopping-cart.pull-right.large