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