<div class="form-item form-item--paypal-widget">
    <div class="paypal-widget__info">
        <img src="/assets/images/payment-method-paypal.png" alt="PayPal logo" class="image paypal-widget__info-image">

        <a href="#" class="paypal-widget__info-link">What is PayPal?</a>
    </div>
    <div class="paypal-widget__description">
        <p class="paragraph">You will be redirected to PayPal's website to proceed with this checkout. Upon completion, you will be returned to the Maui Jim website.</p>

    </div>
</div>
<div class="form-item form-item--paypal-widget">
  <div class="paypal-widget__info">
    {{render '@image' image}}
    <a href="{{link.url}}" class="paypal-widget__info-link">{{link.text}}</a>
  </div>
  <div class="paypal-widget__description">
    {{render '@paragraph' paragraph}}
  </div>
</div>
{
  "image": {
    "alt": "PayPal logo",
    "src": "/assets/images/payment-method-paypal.png",
    "classes": [
      "paypal-widget__info-image"
    ]
  },
  "link": {
    "text": "What is PayPal?",
    "url": "#"
  },
  "paragraph": {
    "value": "You will be redirected to PayPal's website to proceed with this checkout. Upon completion, you will be returned to the Maui Jim website.",
    "classes": true
  }
}
  • Content:
    .paypal-widget__info {
      display: flex;
    }
    
    .paypal-widget__info-image {
      margin-right: $gutter-width-half;
    }
    
    .paypal-widget__info-link {
      transition: color $transition-standard;
      color: $color-primary;
      line-height: 30px;
      text-decoration: none;
    }
    
    .paypal-widget__description {
      font-size: 1.4rem;
      line-height: 2.0rem;
    }
    
  • URL: /components/raw/paypal-widget/paypal-widget.scss
  • Filesystem Path: src/components/01-elements/form-items/paypal-widget/paypal-widget.scss
  • Size: 331 Bytes

There are no notes for this item.