<div class="call-to-action call-to-action--print">
    <span class="call-to-action__label">Bring this to your optician</span>
    <a class="call-to-action__button button button--outlined" href="#">
    Print
  </a>
</div>
<div class="call-to-action call-to-action--{{modifier}}">
  {{#if label}}
  <span class="call-to-action__label">{{label}}</span>
  {{/if}}
  <a class="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>
{
  "buttonVariant": "outlined",
  "buttonValue": "Print",
  "label": "Bring this to your optician",
  "modifier": "print",
  "path": "#"
}
  • Content:
    .call-to-action {
      @include breakpoint($breakpoint-md) {
        /* critical */
        @include clearfix;
      }
    }
    
    .call-to-action__label {
      @include font-bold;
      /* critical */
      display: block;
      color: $color-darkest;
      font-size: 1.4rem;
      text-align: center;
    
      .call-to-action--try-in-store & {
        /* critical */
        line-height: 2.0rem;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        /* critical */
        margin-bottom: 5px;
      }
    
      @include breakpoint($breakpoint-md) {
        /* critical */
        margin-bottom: 7px;
      }
    
      @include breakpoint($breakpoint-xl) {
        /* critical */
        text-align: left;
      }
    }
    
    .call-to-action__button {
      /* critical */
      display: block;
      position: relative;
      margin-right: auto;
      margin-left: auto;
      line-height: 4.8rem;
    
      .call-to-action--mymaui & {
        /* critical */
        background: $color-white url('../images/mymaui-accent.gif') no-repeat 10px 16px;
    
        .icon {
          /* critical */
          position: absolute;
          top: 21px;
          right: 10px;
          height: 8px;
          fill: $color-primary;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        /* critical */
        box-sizing: border-box;
      }
    
      @include breakpoint($breakpoint-xl) {
        /* critical */
        width: 300px;
        margin-left: 0;
      }
    }
    
    .call-to-action--find-an-optician,
    .call-to-action--print {
      .call-to-action__label {
        width: auto;
        margin-bottom: 5px;
        float: none;
    
        @include breakpoint($breakpoint-md) {
          text-align: left;
        }
      }
    
      .call-to-action__button {
        display: block;
        width: auto;
        float: none;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 300px;
      }
    }
    
    .call-to-action--find-an-optician {
      @include breakpoint($breakpoint-md) {
        margin-bottom: 20px;
      }
    
      .call-to-action__label {
        display: none;
    
        @include breakpoint($breakpoint-xl) {
          display: block;
        }
      }
    }
    
    .call-to-action--print {
      .call-to-action__label {
        display: block;
      }
    }
    
  • URL: /components/raw/call-to-action/call-to-action.scss
  • Filesystem Path: src/components/01-elements/call-to-action/call-to-action.scss
  • Size: 1.9 KB

There are no notes for this item.