Weekly Ad Grid

Ready

HTML
View
Context
Assets
Info
Notes
Accessibility


        
        <div id="get-these-hot-deals-while-they-last" class="weekly-ad-grid pt-64">
    <div class="weekly-ad-grid__inner">
        <div class="weekly-ad-grid__group">
            <h4 class="h1-style">Get These Hot Deals While They Last</h4>

        </div>
        <div class="weekly-ad-grid__items">

            <div class="weekly-ad-card weekly-ad-card--2-1">
                <div class="weekly-ad-card__inner">
                    <figure class="weekly-ad-card__image weekly-ad-card__image--viking">
                        <img src="../../images/product/home-decor-1.png" alt="Sample Product Image">
                    </figure>
                    <h5 class="weekly-ad-card__title">
                        Sample Product
                        <span class="weekly-ad-card__sku">(SKU-123456789)</span>
                    </h5>
                    <h6 class="h1-style weekly-ad-card__promo">
                        <span class="weekly-ad-card__price"><sup>$</sup>199.99</span>
                        <small class="weekly-ad-card__flavor">Buy 1, Get 1</small>
                    </h6>
                    <div class="weekly-ad-card__actions">

                        <a class="a-btn a-btn--primary" href="#">

                            Shop Deal

                        </a>

                    </div>
                </div>
            </div>

            <div class="weekly-ad-card weekly-ad-card--1-1">
                <div class="weekly-ad-card__inner">
                    <figure class="weekly-ad-card__image weekly-ad-card__image--rose">
                        <img src="../../images/product/home-decor-2.png" alt="Sample Product Image">
                    </figure>
                    <h5 class="weekly-ad-card__title">
                        Sample Product
                        <span class="weekly-ad-card__sku">(SKU-123456789)</span>
                    </h5>
                    <h6 class="h1-style weekly-ad-card__promo">
                        <span class="weekly-ad-card__price"><sup>$</sup>199.99</span>
                        <small class="weekly-ad-card__flavor">Buy 1, Get 1</small>
                    </h6>
                    <div class="weekly-ad-card__actions">

                        <a class="a-btn a-btn--primary" href="#">

                            Shop Deal

                        </a>

                    </div>
                </div>
            </div>

            <div class="weekly-ad-card weekly-ad-card--1-1">
                <div class="weekly-ad-card__inner">
                    <figure class="weekly-ad-card__image weekly-ad-card__image--sky">
                        <img src="../../images/product/home-decor-2.png" alt="Sample Product Image">
                    </figure>
                    <h5 class="weekly-ad-card__title">
                        Sample Product
                        <span class="weekly-ad-card__sku">(SKU-123456789)</span>
                    </h5>
                    <h6 class="h1-style weekly-ad-card__promo">
                        <span class="weekly-ad-card__price"><sup>$</sup>199.99</span>
                        <small class="weekly-ad-card__flavor">Buy 1, Get 1</small>
                    </h6>
                    <div class="weekly-ad-card__actions">

                        <a class="a-btn a-btn--primary" href="#">

                            Shop Deal

                        </a>

                    </div>
                </div>
            </div>

            <div class="weekly-ad-card weekly-ad-card--1-1">
                <div class="weekly-ad-card__inner">
                    <figure class="weekly-ad-card__image weekly-ad-card__image--tradewind">
                        <img src="../../images/product/home-decor-3.png" alt="Sample Product Image">
                    </figure>
                    <h5 class="weekly-ad-card__title">
                        Sample Product
                        <span class="weekly-ad-card__sku">(SKU-123456789)</span>
                    </h5>
                    <h6 class="h1-style weekly-ad-card__promo">
                        <span class="weekly-ad-card__price"><sup>$</sup>199.99</span>
                        <small class="weekly-ad-card__flavor">Buy 1, Get 1</small>
                    </h6>
                    <div class="weekly-ad-card__actions">

                        <a class="a-btn a-btn--primary" href="#">

                            Shop Deal

                        </a>

                    </div>
                </div>
            </div>

            <div class="weekly-ad-card weekly-ad-card--1-1">
                <div class="weekly-ad-card__inner">
                    <figure class="weekly-ad-card__image weekly-ad-card__image--orange">
                        <img src="../../images/product/home-decor-1.png" alt="Sample Product Image">
                    </figure>
                    <h5 class="weekly-ad-card__title">
                        Sample Product
                        <span class="weekly-ad-card__sku">(SKU-123456789)</span>
                    </h5>
                    <h6 class="h1-style weekly-ad-card__promo">
                        <span class="weekly-ad-card__price"><sup>$</sup>199.99</span>
                        <small class="weekly-ad-card__flavor">Buy 1, Get 1</small>
                    </h6>
                    <div class="weekly-ad-card__actions">

                        <a class="a-btn a-btn--primary" href="#">

                            Shop Deal

                        </a>

                    </div>
                </div>
            </div>

            <div class="weekly-ad-card weekly-ad-card--1-1">
                <div class="weekly-ad-card__inner">
                    <figure class="weekly-ad-card__image weekly-ad-card__image--red">
                        <img src="../../images/product/home-decor-2.png" alt="Sample Product Image">
                    </figure>
                    <h5 class="weekly-ad-card__title">
                        Sample Product
                        <span class="weekly-ad-card__sku">(SKU-123456789)</span>
                    </h5>
                    <h6 class="h1-style weekly-ad-card__promo">
                        <span class="weekly-ad-card__price"><sup>$</sup>199.99</span>
                        <small class="weekly-ad-card__flavor">Buy 1, Get 1</small>
                    </h6>
                    <div class="weekly-ad-card__actions">

                        <a class="a-btn a-btn--primary" href="#">

                            Shop Deal

                        </a>

                    </div>
                </div>
            </div>

            <div class="weekly-ad-card weekly-ad-card--3-1">
                <div class="weekly-ad-card__inner">
                    <figure class="weekly-ad-card__image weekly-ad-card__image--green">
                        <img src="../../images/product/home-decor-3.png" alt="Sample Product Image">
                    </figure>
                    <h5 class="weekly-ad-card__title">
                        Sample Product
                        <span class="weekly-ad-card__sku">(SKU-123456789)</span>
                    </h5>
                    <h6 class="h1-style weekly-ad-card__promo">
                        <span class="weekly-ad-card__price"><sup>$</sup>199.99</span>
                        <small class="weekly-ad-card__flavor">Buy 1, Get 1</small>
                    </h6>
                    <div class="weekly-ad-card__actions">

                        <a class="a-btn a-btn--primary" href="#">

                            Shop Deal

                        </a>

                    </div>
                </div>
            </div>

            <div class="weekly-ad-card weekly-ad-card--4-1">
                <div class="weekly-ad-card__inner">
                    <figure class="weekly-ad-card__image weekly-ad-card__image--blue">
                        <img src="../../images/product/home-decor-1.png" alt="Sample Product Image">
                    </figure>
                    <h5 class="weekly-ad-card__title">
                        Sample Product
                        <span class="weekly-ad-card__sku">(SKU-123456789)</span>
                    </h5>
                    <h6 class="h1-style weekly-ad-card__promo">
                        <span class="weekly-ad-card__price"><sup>$</sup>199.99</span>
                        <small class="weekly-ad-card__flavor">Buy 1, Get 1</small>
                    </h6>
                    <div class="weekly-ad-card__actions">

                        <a class="a-btn a-btn--primary" href="#">

                            Shop Deal

                        </a>

                    </div>
                </div>
            </div>

            <div class="weekly-ad-card weekly-ad-card--1-1">
                <div class="weekly-ad-card__inner">
                    <figure class="weekly-ad-card__image weekly-ad-card__image--beige">
                        <img src="../../images/product/home-decor-2.png" alt="Sample Product Image">
                    </figure>
                    <h5 class="weekly-ad-card__title">
                        Sample Product
                        <span class="weekly-ad-card__sku">(SKU-123456789)</span>
                    </h5>
                    <h6 class="h1-style weekly-ad-card__promo">
                        <span class="weekly-ad-card__price"><sup>$</sup>199.99</span>
                        <small class="weekly-ad-card__flavor">Buy 1, Get 1</small>
                    </h6>
                    <div class="weekly-ad-card__actions">

                        <a class="a-btn a-btn--primary" href="#">

                            Shop Deal

                        </a>

                    </div>
                </div>
            </div>

            <div class="weekly-ad-card weekly-ad-card--1-1">
                <div class="weekly-ad-card__inner">
                    <figure class="weekly-ad-card__image weekly-ad-card__image--bermuda">
                        <img src="../../images/product/home-decor-3.png" alt="Sample Product Image">
                    </figure>
                    <h5 class="weekly-ad-card__title">
                        Sample Product
                        <span class="weekly-ad-card__sku">(SKU-123456789)</span>
                    </h5>
                    <h6 class="h1-style weekly-ad-card__promo">
                        <span class="weekly-ad-card__price"><sup>$</sup>199.99</span>
                        <small class="weekly-ad-card__flavor">Buy 1, Get 1</small>
                    </h6>
                    <div class="weekly-ad-card__actions">

                        <a class="a-btn a-btn--primary" href="#">

                            Shop Deal

                        </a>

                    </div>
                </div>
            </div>

            <div class="weekly-ad-card weekly-ad-card--1-1">
                <div class="weekly-ad-card__inner">
                    <figure class="weekly-ad-card__image weekly-ad-card__image--viking">
                        <img src="../../images/product/home-decor-1.png" alt="Sample Product Image">
                    </figure>
                    <h5 class="weekly-ad-card__title">
                        Sample Product
                        <span class="weekly-ad-card__sku">(SKU-123456789)</span>
                    </h5>
                    <h6 class="h1-style weekly-ad-card__promo">
                        <span class="weekly-ad-card__price"><sup>$</sup>199.99</span>
                        <small class="weekly-ad-card__flavor">Buy 1, Get 1</small>
                    </h6>
                    <div class="weekly-ad-card__actions">

                        <a class="a-btn a-btn--primary" href="#">

                            Shop Deal

                        </a>

                    </div>
                </div>
            </div>

            <div class="weekly-ad-card weekly-ad-card--1-1">
                <div class="weekly-ad-card__inner">
                    <figure class="weekly-ad-card__image weekly-ad-card__image--tradewind">
                        <img src="../../images/product/home-decor-2.png" alt="Sample Product Image">
                    </figure>
                    <h5 class="weekly-ad-card__title">
                        Sample Product
                        <span class="weekly-ad-card__sku">(SKU-123456789)</span>
                    </h5>
                    <h6 class="h1-style weekly-ad-card__promo">
                        <span class="weekly-ad-card__price"><sup>$</sup>199.99</span>
                        <small class="weekly-ad-card__flavor">Buy 1, Get 1</small>
                    </h6>
                    <div class="weekly-ad-card__actions">

                        <a class="a-btn a-btn--primary" href="#">

                            Shop Deal

                        </a>

                    </div>
                </div>
            </div>

            <div class="weekly-ad-card weekly-ad-card--1-1">
                <div class="weekly-ad-card__inner">
                    <figure class="weekly-ad-card__image weekly-ad-card__image--denim">
                        <img src="../../images/product/home-decor-3.png" alt="Sample Product Image">
                    </figure>
                    <h5 class="weekly-ad-card__title">
                        Sample Product
                        <span class="weekly-ad-card__sku">(SKU-123456789)</span>
                    </h5>
                    <h6 class="h1-style weekly-ad-card__promo">
                        <span class="weekly-ad-card__price"><sup>$</sup>199.99</span>
                        <small class="weekly-ad-card__flavor">Buy 1, Get 1</small>
                    </h6>
                    <div class="weekly-ad-card__actions">

                        <a class="a-btn a-btn--primary" href="#">

                            Shop Deal

                        </a>

                    </div>
                </div>
            </div>

            <div class="weekly-ad-card weekly-ad-card--1-1">
                <div class="weekly-ad-card__inner">
                    <figure class="weekly-ad-card__image weekly-ad-card__image--stars">
                        <img src="../../images/product/home-decor-1.png" alt="Sample Product Image">
                    </figure>
                    <h5 class="weekly-ad-card__title">
                        Sample Product
                        <span class="weekly-ad-card__sku">(SKU-123456789)</span>
                    </h5>
                    <h6 class="h1-style weekly-ad-card__promo">
                        <span class="weekly-ad-card__price"><sup>$</sup>199.99</span>
                        <small class="weekly-ad-card__flavor">Buy 1, Get 1</small>
                    </h6>
                    <div class="weekly-ad-card__actions">

                        <a class="a-btn a-btn--primary" href="#">

                            Shop Deal

                        </a>

                    </div>
                </div>
            </div>

            <div class="weekly-ad-card weekly-ad-card--5-1">
                <div class="weekly-ad-card__inner">
                    <figure class="weekly-ad-card__image weekly-ad-card__image--primary-blue">
                        <img src="../../images/product/home-decor-2.png" alt="Sample Product Image">
                    </figure>
                    <h5 class="weekly-ad-card__title">
                        Sample Product
                        <span class="weekly-ad-card__sku">(SKU-123456789)</span>
                    </h5>
                    <h6 class="h1-style weekly-ad-card__promo">
                        <span class="weekly-ad-card__price"><sup>$</sup>199.99</span>
                        <small class="weekly-ad-card__flavor">Buy 1, Get 1</small>
                    </h6>
                    <div class="weekly-ad-card__actions">

                        <a class="a-btn a-btn--primary" href="#">

                            Shop Deal

                        </a>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


        <div id="{{group.title|kebabcase}}" class="weekly-ad-grid pt-64{{modifierClasses|lspace}}">
	<div class="weekly-ad-grid__inner">
		<div class="weekly-ad-grid__group">
			<h4 class="h1-style">{{group.title}}</h4>
			{% if group.image %}
			<figure>
				<img src="{{group.image.src|path}}" alt="{{group.image.alt}}">
			</figure>
			{% endif %}
		</div>
		<div class="weekly-ad-grid__items">
			{% for item in items %}
				{% render '@weekly-ad-card', item, true %}
			{% endfor %}
		</div>
	</div>
</div>


        
            
            {
  "grid": {
    "x": 5,
    "y": "auto"
  },
  "group": {
    "title": "Get These Hot Deals While They Last"
  },
  "items": [
    {
      "size": {
        "x": 2,
        "y": 1
      },
      "product": {
        "sku": "SKU-123456789",
        "title": "Sample Product",
        "image": {
          "src": "/images/product/home-decor-1.png",
          "alt": "Sample Product Image",
          "accent": "viking"
        }
      },
      "promoPrice": 199.99,
      "flavorText": "Buy 1, Get 1",
      "button": {
        "tag": "a",
        "href": "#",
        "text": "Shop Deal"
      }
    },
    {
      "size": {
        "x": 1,
        "y": 1
      },
      "product": {
        "sku": "SKU-123456789",
        "title": "Sample Product",
        "image": {
          "src": "/images/product/home-decor-2.png",
          "alt": "Sample Product Image",
          "accent": "rose"
        }
      },
      "promoPrice": 199.99,
      "flavorText": "Buy 1, Get 1",
      "button": {
        "tag": "a",
        "href": "#",
        "text": "Shop Deal"
      }
    },
    {
      "size": {
        "x": 1,
        "y": 1
      },
      "product": {
        "sku": "SKU-123456789",
        "title": "Sample Product",
        "image": {
          "src": "/images/product/home-decor-2.png",
          "alt": "Sample Product Image",
          "accent": "sky"
        }
      },
      "promoPrice": 199.99,
      "flavorText": "Buy 1, Get 1",
      "button": {
        "tag": "a",
        "href": "#",
        "text": "Shop Deal"
      }
    },
    {
      "size": {
        "x": 1,
        "y": 1
      },
      "product": {
        "sku": "SKU-123456789",
        "title": "Sample Product",
        "image": {
          "src": "/images/product/home-decor-3.png",
          "alt": "Sample Product Image",
          "accent": "tradewind"
        }
      },
      "promoPrice": 199.99,
      "flavorText": "Buy 1, Get 1",
      "button": {
        "tag": "a",
        "href": "#",
        "text": "Shop Deal"
      }
    },
    {
      "size": {
        "x": 1,
        "y": 1
      },
      "product": {
        "sku": "SKU-123456789",
        "title": "Sample Product",
        "image": {
          "src": "/images/product/home-decor-1.png",
          "alt": "Sample Product Image",
          "accent": "orange"
        }
      },
      "promoPrice": 199.99,
      "flavorText": "Buy 1, Get 1",
      "button": {
        "tag": "a",
        "href": "#",
        "text": "Shop Deal"
      }
    },
    {
      "size": {
        "x": 1,
        "y": 1
      },
      "product": {
        "sku": "SKU-123456789",
        "title": "Sample Product",
        "image": {
          "src": "/images/product/home-decor-2.png",
          "alt": "Sample Product Image",
          "accent": "red"
        }
      },
      "promoPrice": 199.99,
      "flavorText": "Buy 1, Get 1",
      "button": {
        "tag": "a",
        "href": "#",
        "text": "Shop Deal"
      }
    },
    {
      "size": {
        "x": 3,
        "y": 1
      },
      "product": {
        "sku": "SKU-123456789",
        "title": "Sample Product",
        "image": {
          "src": "/images/product/home-decor-3.png",
          "alt": "Sample Product Image",
          "accent": "green"
        }
      },
      "promoPrice": 199.99,
      "flavorText": "Buy 1, Get 1",
      "button": {
        "tag": "a",
        "href": "#",
        "text": "Shop Deal"
      }
    },
    {
      "size": {
        "x": 4,
        "y": 1
      },
      "product": {
        "sku": "SKU-123456789",
        "title": "Sample Product",
        "image": {
          "src": "/images/product/home-decor-1.png",
          "alt": "Sample Product Image",
          "accent": "blue"
        }
      },
      "promoPrice": 199.99,
      "flavorText": "Buy 1, Get 1",
      "button": {
        "tag": "a",
        "href": "#",
        "text": "Shop Deal"
      }
    },
    {
      "size": {
        "x": 1,
        "y": 1
      },
      "product": {
        "sku": "SKU-123456789",
        "title": "Sample Product",
        "image": {
          "src": "/images/product/home-decor-2.png",
          "alt": "Sample Product Image",
          "accent": "beige"
        }
      },
      "promoPrice": 199.99,
      "flavorText": "Buy 1, Get 1",
      "button": {
        "tag": "a",
        "href": "#",
        "text": "Shop Deal"
      }
    },
    {
      "size": {
        "x": 1,
        "y": 1
      },
      "product": {
        "sku": "SKU-123456789",
        "title": "Sample Product",
        "image": {
          "src": "/images/product/home-decor-3.png",
          "alt": "Sample Product Image",
          "accent": "bermuda"
        }
      },
      "promoPrice": 199.99,
      "flavorText": "Buy 1, Get 1",
      "button": {
        "tag": "a",
        "href": "#",
        "text": "Shop Deal"
      }
    },
    {
      "size": {
        "x": 1,
        "y": 1
      },
      "product": {
        "sku": "SKU-123456789",
        "title": "Sample Product",
        "image": {
          "src": "/images/product/home-decor-1.png",
          "alt": "Sample Product Image",
          "accent": "viking"
        }
      },
      "promoPrice": 199.99,
      "flavorText": "Buy 1, Get 1",
      "button": {
        "tag": "a",
        "href": "#",
        "text": "Shop Deal"
      }
    },
    {
      "size": {
        "x": 1,
        "y": 1
      },
      "product": {
        "sku": "SKU-123456789",
        "title": "Sample Product",
        "image": {
          "src": "/images/product/home-decor-2.png",
          "alt": "Sample Product Image",
          "accent": "tradewind"
        }
      },
      "promoPrice": 199.99,
      "flavorText": "Buy 1, Get 1",
      "button": {
        "tag": "a",
        "href": "#",
        "text": "Shop Deal"
      }
    },
    {
      "size": {
        "x": 1,
        "y": 1
      },
      "product": {
        "sku": "SKU-123456789",
        "title": "Sample Product",
        "image": {
          "src": "/images/product/home-decor-3.png",
          "alt": "Sample Product Image",
          "accent": "denim"
        }
      },
      "promoPrice": 199.99,
      "flavorText": "Buy 1, Get 1",
      "button": {
        "tag": "a",
        "href": "#",
        "text": "Shop Deal"
      }
    },
    {
      "size": {
        "x": 1,
        "y": 1
      },
      "product": {
        "sku": "SKU-123456789",
        "title": "Sample Product",
        "image": {
          "src": "/images/product/home-decor-1.png",
          "alt": "Sample Product Image",
          "accent": "stars"
        }
      },
      "promoPrice": 199.99,
      "flavorText": "Buy 1, Get 1",
      "button": {
        "tag": "a",
        "href": "#",
        "text": "Shop Deal"
      }
    },
    {
      "size": {
        "x": 5,
        "y": 1
      },
      "product": {
        "sku": "SKU-123456789",
        "title": "Sample Product",
        "image": {
          "src": "/images/product/home-decor-2.png",
          "alt": "Sample Product Image",
          "accent": "primary-blue"
        }
      },
      "promoPrice": 199.99,
      "flavorText": "Buy 1, Get 1",
      "button": {
        "tag": "a",
        "href": "#",
        "text": "Shop Deal"
      }
    }
  ]
}

File:

Content:


                                .weekly-ad-grid {
  $this: &;

  &__inner {}

  &__group {}

  &__items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    gap: rem(calc($grid-gutter / 2));

    .weekly-ad-card {
      &--1-1 {
        grid-column-end: span 5;
      }
      &--2-1 {
        grid-column-end: span 5;
      }
      &--3-1 {
        grid-column-end: span 5;
      }
      &--4-1 {
        grid-column-end: span 5;
      }
      &--5-1 {
        grid-column-end: span 5;
      }
    }

    @include media-lg-up {
      .weekly-ad-card {
        &--1-1 {
          grid-column-end: span 1;
        }
        &--2-1 {
          grid-column-end: span 2;
        }
        &--3-1 {
          grid-column-end: span 3;
        }
        &--4-1 {
          grid-column-end: span 4;
        }
        &--5-1 {
          grid-column-end: span 5;
        }
      }
    }
  }
}

URL: /components/raw/weekly-ad-grid/weekly-ad-grid.scss
Filesystem Path: source/patterns/organisms/weekly-ad-grid/weekly-ad-grid.scss
Size: 895 Bytes

Handle: @weekly-ad-grid
Preview:
- With layout
- Component only
Filesystem Path: source/patterns/organisms/weekly-ad-grid/weekly-ad-grid.njk
References (1): @weekly-ad-card
Referenced by (1): @weekly-ads

No notes defined.