Product Grids

Feature multiple products and product details

NEW ARRIVALS: Shop the sale

Code Example Shortcut: z-product-grid-1

<z-container>
  <z-row>
    <z-col class="m-0 p-0 d-flex align-items-stretch">
      <img src="../../docs/images/misc/lifestyle-product/3.jpg" alt="">
    </z-col>
    <z-container>
      <z-row class="p-0 mobile:two-up">
        <z-col class="m-0 p-0 d-flex align-items-stretch">
          <img src="../../docs/images/misc/lifestyle-product/1.jpg" alt="">
        </z-col>
        <z-col class="m-0 p-0 d-flex align-items-stretch">
          <img src="../../docs/images/misc/lifestyle-product/2.jpg" alt="">
        </z-col>
      </z-row>
      <z-row class="mt-2 mb-2">
        <z-col class="bg-grey-6-dark m-0 br-sm">
          <span class="text-medium">
            <i class=" zenicon-local-offer down-1"></i> NEW ARRIVALS:
          </span>
          Shop the sale <i class="zenicon-east down-2"></i>
        </z-col>
      </z-row>
      <z-row class="p-0 m-0">
        <z-col class="m-0 p-0  d-flex align-items-stretch">
          <img src="../../docs/images/misc/lifestyle-product/4.jpg" alt="">
        </z-col>
      </z-row>
    </z-container>
  </z-row>
</z-container>

BACK IN STOCK

Text + Product Row

Images switch to a grid when transitioning to mobile.

Aatque $27

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus fuga officia asperiores.

Blanditis $47

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus fuga officia asperiores.

Adelorem $67

ssLorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus fuga officia asperiores.

Aatque blanditiis $97

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus fuga officia asperiores.

Code Example Shortcut: z-product-grid-2

<z-container class="page-section">
    <z-row>
      <z-col>
        <div class="card">
          <span class="eyebrow up-1 text-cta-dual">BACK IN STOCK</span>
          <h2 class="h3 headline">Text + Product Row</h2>
          <p>Images switch to a grid when transitioning to mobile.</p>
        </div>
      </z-col>
    </z-row>
    <z-row class="p-0">
      <z-col class="p-0">
        <z-container>
          <z-row class="mobile:two-up gap-0">
            <z-col class="p-2">
              <img src="image-1.jpg" alt="">
              <div class="card p-0 m-0">
                <p class="headline mt-4">Aatque  <span class="bolder text-cta-dual">$27</span></p>
                <small>Lorem ipsum dolor...</small>
              </div>
            </z-col>
            <z-col class="p-2">
              <img src="image-2.jpg" alt="">
              <div class="card p-0 m-0">
                <p class="headline mt-4">Blanditis  <span class="bolder text-cta-dual">$47</span></p>
                <small>Lorem ipsum dolor...</small>
              </div>
            </z-col>
            <z-col class="p-2">
              <img src="image-3.jpg" alt="">
              <div class="card p-0 m-0">
                <p class="headline mt-4">Adelorem  <span class="bolder text-cta-dual">$67</span></p>
                <small>Lorem ipsum dolor...</small>
              </div>
            </z-col>
            <z-col class="p-2">
              <img src="image-4.jpg" alt="">
              <div class="card p-0 m-0">
                <p class="headline mt-4">Aatque blanditiis  <span class="bolder text-cta-dual">$97</span></p>
                <small>Lorem ipsum dolor...</small>
              </div>
            </z-col>
          </z-row>
        </z-container>
      </z-col>
    </z-row>
  </z-container>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.