<div style="width: 376px">
<div class="acl-product-catalogue">
<div class="acl-product-catalogue__items">
<div class="acl-product-catalogue__item acl-product-catalogue__item--active">
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-1.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Long Product Name / Detailed Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>12.30
each
</div>
<div class="acl-product-catalogue__cart">
x25 in Cart
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
<div class="acl-product-catalogue__item">
<div class="acl-product-catalogue__image-icon acl-product-catalogue__image-icon--teal">
<i class="aforza-icons animated fadeIn">acl_recyclable_product_badge</i>
</div>
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-2.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Long Product Name / Detailed Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>1.40
each
</div>
<div class="acl-product-catalogue__chip acl-product-catalogue__chip--teal">
Recyclable
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
<div class="acl-product-catalogue__item">
<div class="acl-product-catalogue__image-icon acl-product-catalogue__image-icon--yellow">
<i class="aforza-icons animated fadeIn">acl_popular_product_badge</i>
</div>
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-1.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Long Product Name / Detailed Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>1,000.49
each
</div>
<div class="acl-product-catalogue__chip acl-product-catalogue__chip--yellow">
Popular
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
<div class="acl-product-catalogue__item">
<div class="acl-product-catalogue__image-icon acl-product-catalogue__image-icon--green">
<i class="aforza-icons animated fadeIn">acl_comission_product_badge</i>
</div>
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-1.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Long Product Name / Detailed Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>999.00
each
</div>
<div class="acl-product-catalogue__chip acl-product-catalogue__chip--green">
10% Commission
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
<div class="acl-product-catalogue__item acl-product-catalogue__item--active">
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-2.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Very Long Product Name / Extra Detailed Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>12.30
each
</div>
<div class="acl-product-catalogue__cart">
x25 in Cart
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
<div class="acl-product-catalogue__item">
<div class="acl-product-catalogue__image-icon acl-product-catalogue__image-icon--orange">
<i class="aforza-icons animated fadeIn">acl_lowstock_product_badge</i>
</div>
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-3.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Long Product Name / Detailed Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>49.99
each
</div>
<div class="acl-product-catalogue__chip acl-product-catalogue__chip--orange">
Low in stock
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
<div class="acl-product-catalogue__item">
<div class="acl-product-catalogue__image-icon acl-product-catalogue__image-icon--blue">
<i class="aforza-icons animated fadeIn">acl_endorsed_product_badge</i>
</div>
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-1.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Very Long Product Name / Extra Detailed Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>2.30
each
</div>
<div class="acl-product-catalogue__chip acl-product-catalogue__chip--blue">
Long Endorsed Message
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
<div class="acl-product-catalogue__item">
<div class="acl-product-catalogue__image-icon acl-product-catalogue__image-icon--red">
<i class="aforza-icons animated fadeIn">acl_nostock_product_badge</i>
</div>
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-2.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Product Name / Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>82.30
each
</div>
<div class="acl-product-catalogue__chip acl-product-catalogue__chip--red">
Out of stock
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
<div class="acl-product-catalogue__item">
<div class="acl-product-catalogue__image-icon acl-product-catalogue__image-icon--grey">
<i class="aforza-icons animated fadeIn">acl_new_product_badge</i>
</div>
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-1.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Long Product Name / Detailed Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>2.30
each
</div>
<div class="acl-product-catalogue__chip acl-product-catalogue__chip--grey">
New
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
</div>
</div>
</div>
<div style="width: 376px">
<div class="acl-product-catalogue">
<div class="acl-product-catalogue__items">
<div class="acl-product-catalogue__item acl-product-catalogue__item--active">
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-1.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Long Product Name / Detailed Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>12.30
each
</div>
<div class="acl-product-catalogue__cart">
x25 in Cart
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
<div class="acl-product-catalogue__item">
<div class="acl-product-catalogue__image-icon acl-product-catalogue__image-icon--teal">
<i class="aforza-icons animated fadeIn">acl_recyclable_product_badge</i>
</div>
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-2.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Long Product Name / Detailed Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>1.40
each
</div>
<div class="acl-product-catalogue__chip acl-product-catalogue__chip--teal">
Recyclable
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
<div class="acl-product-catalogue__item">
<div class="acl-product-catalogue__image-icon acl-product-catalogue__image-icon--yellow">
<i class="aforza-icons animated fadeIn">acl_popular_product_badge</i>
</div>
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-1.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Long Product Name / Detailed Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>1,000.49
each
</div>
<div class="acl-product-catalogue__chip acl-product-catalogue__chip--yellow">
Popular
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
<div class="acl-product-catalogue__item">
<div class="acl-product-catalogue__image-icon acl-product-catalogue__image-icon--green">
<i class="aforza-icons animated fadeIn">acl_comission_product_badge</i>
</div>
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-1.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Long Product Name / Detailed Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>999.00
each
</div>
<div class="acl-product-catalogue__chip acl-product-catalogue__chip--green">
10% Commission
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
<div class="acl-product-catalogue__item acl-product-catalogue__item--active">
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-2.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Very Long Product Name / Extra Detailed Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>12.30
each
</div>
<div class="acl-product-catalogue__cart">
x25 in Cart
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
<div class="acl-product-catalogue__item">
<div class="acl-product-catalogue__image-icon acl-product-catalogue__image-icon--orange">
<i class="aforza-icons animated fadeIn">acl_lowstock_product_badge</i>
</div>
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-3.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Long Product Name / Detailed Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>49.99
each
</div>
<div class="acl-product-catalogue__chip acl-product-catalogue__chip--orange">
Low in stock
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
<div class="acl-product-catalogue__item">
<div class="acl-product-catalogue__image-icon acl-product-catalogue__image-icon--blue">
<i class="aforza-icons animated fadeIn">acl_endorsed_product_badge</i>
</div>
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-1.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Very Long Product Name / Extra Detailed Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>2.30
each
</div>
<div class="acl-product-catalogue__chip acl-product-catalogue__chip--blue">
Long Endorsed Message
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
<div class="acl-product-catalogue__item">
<div class="acl-product-catalogue__image-icon acl-product-catalogue__image-icon--red">
<i class="aforza-icons animated fadeIn">acl_nostock_product_badge</i>
</div>
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-2.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Product Name / Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>82.30
each
</div>
<div class="acl-product-catalogue__chip acl-product-catalogue__chip--red">
Out of stock
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
<div class="acl-product-catalogue__item">
<div class="acl-product-catalogue__image-icon acl-product-catalogue__image-icon--grey">
<i class="aforza-icons animated fadeIn">acl_new_product_badge</i>
</div>
<img class="acl-product-catalogue__image" src="/assets/img/product-ex-1.png" />
<div class="acl-product-catalogue__item-details">
<div class="acl-product-catalogue__name">
Long Product Name / Detailed Information 500ml (20 Pack)
</div>
<div class="acl-product-catalogue__code">
SKU-01234<span>•</span>100 in Stock
</div>
<div class="acl-product-catalogue__price">
<div class="acl-product-catalogue__cost">
<span class="acl-product-catalogue__currency">$</span>2.30
each
</div>
<div class="acl-product-catalogue__chip acl-product-catalogue__chip--grey">
New
</div>
</div>
</div>
<div class="acl-product-catalogue__item-cta">
<i class="aforza-icons animated fadeIn">acl_input_plus</i>
</div>
</div>
</div>
</div>
</div>
/* No context defined. */
@import './product-promotion-card/product-promotion-card';
@import './product-catalogue-card/product-catalogue-card';
No notes defined.