<button class="print-button" onclick="javascript:window.print()">
  <svg class="icon icon--print">
  <use xlink:href="/assets/icons/icons.svg#print"></use>
</svg>

  <span class="print-button__title print-button__title--short">Print</span>
  <span class="print-button__title print-button__title--full">Print This Page</span>
</button>
<button class="print-button" onclick="javascript:window.print()">
  {{render '@icons--print'}}
  {{#if titles.short}}
  <span class="print-button__title print-button__title--short">{{titles.short}}</span>
  {{/if}}
  {{#if titles.full}}
  <span class="print-button__title print-button__title--full">{{titles.full}}</span>
  {{/if}}
</button>
{
  "titles": {
    "short": "Print",
    "full": "Print This Page"
  }
}
  • Content:
    .print-button {
      @include reset-button;
      height: 24px;
    
      .icon {
        margin-right: 8px;
        vertical-align: middle;
        fill: $color-darkest;
      }
    
      // Don't show on the medium breakpoint.
      @include breakpoint($breakpoint-md ($breakpoint-xl - 1)) {
        display: none;
      }
    
      @media print {
        display: none;
      }
    }
    
    .print-button__title {
      display: inline-block;
      position: relative;
      top: 1px;
      color: $color-darkest;
      font-size: 1.4rem;
      letter-spacing: 1px;
      line-height: 2.4rem;
      vertical-align: middle;
    }
    
    .print-button__title--short {
      @include breakpoint($breakpoint-xl) {
        display: none;
      }
    }
    
    .print-button__title--full {
      @include breakpoint($breakpoint-sm-only) {
        display: none;
      }
    }
    
  • URL: /components/raw/print-button/print-button.scss
  • Filesystem Path: src/components/01-elements/print-button/print-button.scss
  • Size: 718 Bytes

There are no notes for this item.