There are no notes for this item.
<section class="product-features">
<div class="product-features__header">
<h3 class="product-features__heading">Works with common payment gateways</h3>
<a href="#" class="more-link">Learn more <svg role="img" class="more-link__arrow"><use xlink:href="../../svg/svg-symbols.svg#long-arrow-right"></use></svg></a>
</div>
<div class="product-features__inner">
<p class="product-features__description">Commerce comes with 8 payment gateways (and counting) to get paid.</p>
</div>
<div class="product-features__grid">
<ul class="product-feature-list">
<li class="product-feature-list__item">
<div class="product-feature-list__media">
<img src="../../images/authorizenet-logo.png" class="product-feature-list__logo">
</div>
<div class="product-feature-list__content">
<h4 class="product-feature-list__heading">Authorize.Net</h4>
<p class="product-feature-list__description">PayPal account, credit cards</p>
</div>
</li>
<li class="product-feature-list__item">
<a href="#" class="product-feature-list__link">
<div class="product-feature-list__media">
<img src="../../images/mollie-logo.png" class="product-feature-list__logo">
</div>
<div class="product-feature-list__content">
<h4 class="product-feature-list__heading">mollie<svg role="img" class="product-feature-list__arrow"><use xlink:href="../../svg/svg-symbols.svg#long-arrow-right"></use></svg></h4>
<p class="product-feature-list__description">PayPal account, credit cards</p>
</div>
</a>
</li>
<li class="product-feature-list__item">
<div class="product-feature-list__media">
<img src="../../images/sagepay-logo.png" class="product-feature-list__logo">
</div>
<div class="product-feature-list__content">
<h4 class="product-feature-list__heading">sagePay</h4>
<p class="product-feature-list__description">Is a product on sale for a period of time? Instead of changing the standard price, add a Sale Price Type and Commerce automatically renders before/after prices for you. The sale price automatically (de)activates.</p>
</div>
</li>
<li class="product-feature-list__item">
<div class="product-feature-list__media">
<img src="../../images/paypal-logo.png" class="product-feature-list__logo">
</div>
<div class="product-feature-list__content">
<h4 class="product-feature-list__heading">PayPal</h4>
<p class="product-feature-list__description">PayPal account, credit cards</p>
</div>
</li>
<li class="product-feature-list__item">
<div class="product-feature-list__media">
<img src="../../images/adyen-logo.png" class="product-feature-list__logo">
</div>
<div class="product-feature-list__content">
<h4 class="product-feature-list__heading">adyen</h4>
<p class="product-feature-list__description">PayPal account, credit cards</p>
</div>
</li>
<li class="product-feature-list__item">
<div class="product-feature-list__media">
<img src="../../images/braintree-logo.png" class="product-feature-list__logo">
</div>
<div class="product-feature-list__content">
<h4 class="product-feature-list__heading">Braintree</h4>
<p class="product-feature-list__description">PayPal account, credit cards</p>
</div>
</li>
</ul>
</div>
</section>
{
"heading": "Works with common payment gateways",
"description": "Commerce comes with 8 payment gateways (and counting) to get paid.",
"features": [
{
"name": "Authorize.Net",
"description": "PayPal account, credit cards",
"image": "authorizenet-logo.png"
},
{
"name": "mollie",
"description": "PayPal account, credit cards",
"image": "mollie-logo.png",
"url": "#"
},
{
"name": "sagePay",
"description": "Is a product on sale for a period of time? Instead of changing the standard price, add a Sale Price Type and Commerce automatically renders before/after prices for you. The sale price automatically (de)activates.",
"image": "sagepay-logo.png"
},
{
"name": "PayPal",
"description": "PayPal account, credit cards",
"image": "paypal-logo.png"
},
{
"name": "adyen",
"description": "PayPal account, credit cards",
"image": "adyen-logo.png"
},
{
"name": "Braintree",
"description": "PayPal account, credit cards",
"image": "braintree-logo.png"
}
]
}
/*------------------------------------*\
Product features
\*------------------------------------*/
.product-features {
margin: 2rem 0;
}
.product-features__header {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.product-features__heading {
margin: 0;
font-size: $font-size-h2;
color: $color-text-base;
}
.product-features__description {
color: $color-text-base;
}
// Grid
.product-features__grid {
margin-top: 1rem;
}
.product-feature-list {
@include reset-list();
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.product-feature-list__item {
width: 100%;
margin: 0 0 0.5rem 0;
padding: 0.5rem;
display: flex;
}
.product-feature-list__link {
display: flex;
&:hover {
text-decoration: none;
margin-top: -2px;
.product-feature-list__media {
box-shadow: 0 4px 6px rgba(20,20,20,.20);
}
.product-feature-list__heading {
color: $color-primary-dark;
}
.product-feature-list__arrow {
fill: $color-primary-dark;
}
.product-feature-list__description {
color: $color-text-base;
}
}
}
.product-feature-list__arrow {
display: inline-block;
position: relative;
top: 1px;
width: 16px;
max-height: 16px;
margin-left: 4px;
fill: $color-primary;
transition: fill 150ms ease-in-out;
}
.product-feature-list__media {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
width: 60px;
height: 60px;
border-radius: 100%;
box-shadow: 0 4px 6px rgba(25,25,25,.10);
transition: box-shadow 150ms ease-in-out;
overflow: hidden;
}
.product-feature-list__logo {
width: 90%;
height: auto;
}
.product-feature-list__icon {
font-size: 1.8rem;
position: relative;
top: 4px;
width: 80%;
height: 80%;
color: $color-tertiary;
}
.product-feature-list__content {
display: flex;
flex-direction: column;
justify-content: flex-start;
flex: 1;
margin-left: 1rem;
}
.product-feature-list__heading {
margin: 0;
font-size: $font-size-h5;
transition: color 150ms ease-in-out;
color: $color-text-base;
}
.product-feature-list__description {
margin: 0;
font-size: $font-size-small;
color: $color-charcoal;
transition: color 150ms ease-in-out;
}
@include mq(medium) {
.product-feature-list__item {
width: 50%;
}
}
@include mq(large) {
.product-feature-list__item {
width: 33.33%;
padding: 1rem;
margin: 0 0 1rem 0;
}
}