<div class="product-call-to-action product-call-to-action--find-an-optician">
    <span class="product-call-to-action__label">Ready to buy?</span>
    <a class="product-call-to-action__button button button--primary" href="#">
    Find an Optician
  </a>
</div>
<div class="product-call-to-action product-call-to-action--{{modifier}}">
  <span class="product-call-to-action__label">{{label}}</span>
  <a class="product-call-to-action__button button button--{{buttonVariant}}{{#each classes}} {{this}}{{/each}}" href="#"{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>
    {{buttonValue}}
    {{#if icon}}
    {{render (dynamicVariant 'icons' icon)}}
    {{/if}}
  </a>
</div>
{
  "pageCss": [
    "products"
  ],
  "buttonVariant": "primary",
  "modifier": "find-an-optician",
  "label": "Ready to buy?",
  "buttonValue": "Find an Optician",
  "path": "#"
}
  • Content:
    .product-call-to-action {
      @include breakpoint($breakpoint-md) {
        @include clearfix;
      }
    }
    
    .product-call-to-action__label {
      display: block;
      color: $color-darkest;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      text-align: center;
    
      .product-call-to-action--try-in-store & {
        line-height: 2.0rem;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        margin-bottom: 5px;
      }
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 7px;
      }
    
      @include breakpoint($breakpoint-xl) {
        text-align: left;
      }
    }
    
    .product-call-to-action__button {
      display: block;
      position: relative;
      margin-right: auto;
      margin-left: auto;
      line-height: 4.8rem;
    
      .product-call-to-action--mymaui & {
        background: $color-white url('../images/mymaui-accent.gif') no-repeat 10px 16px;
    
        .icon {
          position: absolute;
          top: 21px;
          right: 10px;
          height: 8px;
          fill: $color-primary;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        box-sizing: border-box;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 300px;
        margin-left: 0;
      }
    }
    
    .product-call-to-action--find-an-optician,
    .product-call-to-action--print {
      .product-call-to-action__label {
        width: auto;
        margin-bottom: 5px;
        float: none;
    
        @include breakpoint($breakpoint-md) {
          text-align: left;
        }
      }
    
      .product-call-to-action__button {
        display: block;
        width: auto;
        float: none;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 300px;
      }
    }
    
    .product-call-to-action--find-an-optician {
      @include breakpoint($breakpoint-md) {
        margin-bottom: 20px;
      }
    
      .product-call-to-action__label {
        display: none;
    
        @include breakpoint($breakpoint-xl) {
          display: block;
        }
      }
    }
    
    .product-call-to-action--print {
      .product-call-to-action__label {
        display: block;
      }
    }
    
  • URL: /components/raw/product-call-to-action/product-call-to-action.scss
  • Filesystem Path: src/components/02-components/product-call-to-action/product-call-to-action.scss
  • Size: 1.8 KB

There are no notes for this item.