AFW Pattern Lab

Weekly Ad Card: 3 X 1 

<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--viking">
            <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--{{size.x}}-{{size.y}}{{modifierClasses|lspace}}">
	<div class="weekly-ad-card__inner">
	{% if product.image -%}  
	<figure class="weekly-ad-card__image{% if product.image.accent %} weekly-ad-card__image--{{product.image.accent}}{% endif %}">
		<img src="{{product.image.src|path}}" alt="{{product.image.alt}}">
	</figure>
	{%- endif %}
	<h5 class="weekly-ad-card__title">
		{{product.title|safe}}
		{% if product.sku %} <span class="weekly-ad-card__sku">({{product.sku|safe}})</span>{% endif %}
	</h5>
	<h6 class="h1-style weekly-ad-card__promo">
		{% if promoPrice %}<span class="weekly-ad-card__price"><sup>$</sup>{{promoPrice|safe}}</span>{% endif %}
		{% if flavorText %} <small class="weekly-ad-card__flavor">{{flavorText|safe}}</small>{% endif %}</h6>
	{% if button -%}
	<div class="weekly-ad-card__actions">
		{% render '@button--primary', button, true %}
	</div>
	{%- endif %}
	</div>
</div>
 
{
  "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": "viking"
    }
  },
  "promoPrice": "$199.99",
  "flavorText": "Buy 1, Get 1",
  "button": {
    "tag": "a",
    "href": "#",
    "text": "Shop Deal"
  }
}
  • Content: 
    .weekly-ad-card {
  $this: &;

  display: block;

  &__inner {
    @extend .br-16;
    @extend .bg-white;
    @extend .px-12;
    @extend .pb-12;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    transition: border 500ms linear;

    &:before {
      @extend .br-16;
      border: 1px dashed $color-gray;
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    &:after {
      background: #f7f7f7;
      content: '';
      width: 0%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      transition: width 500ms ease-in-out;
    }
  }

  &__image {
    margin: rem(32px) auto;
    position: relative;
    z-index: 1;

    img {
      max-height: 300px;
    }

    @each $color, $var in $colors {
      &--#{$color} {
        &:before {
          @extend .br-32;
          background: $var;
          content: '';
          display: block;
          width: 75%;
          height: 75%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 1;
        }
      }
    }

    img {
      position: relative;
      z-index: 1;
    }
  }

  &__title,
  &__promo,
  &__actions {
    position: relative;
    z-index: 1;
  }

  &__title {
    font-size: rem(18px);
    line-height: 1.25;
    margin-top: auto;
    margin-bottom: 0;
  }

  &__sku {
    color: $color-gray-darker;
    display: block;
    font-size: rem(14px);
  }

  &__promo {}

  &__price {
    font-weight: 900;
    letter-spacing: rem(-2px);
    sup {
      font-size: rem(18px);
      letter-spacing: 0;
    }
  }

  &__flavor {
    display: block;
    font-size: rem(18px);
    line-height: 1;
  }

  &__actions {
    display: flex;
    justify-content: stretch;
    
    .a-btn {
      width: 100%;
    }
  }

  &:hover {
    cursor: pointer;

    #{$this}__inner {
      &:after {
        width: 100%;
        transition: width 500ms ease-in-out;
      }
    }
  }
}
  • URL: /components/raw/weekly-ad-card/weekly-ad-card.scss
  • Filesystem Path: source/patterns/molecules/weekly-ad-card/weekly-ad-card.scss
  • Size: 2.1 KB

No notes defined.