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"
    }
  ]
}
  • Content:
    /*------------------------------------*\
    	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: 3px;
    	color: $color-primary;
    }
    
    .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;
    	}
    }
    
  • URL: /components/raw/product-features/product-features.scss
  • Filesystem Path: components/02-components/product-features/product-features.scss
  • Size: 2.3 KB
  • Handle: @product-features
  • Preview:
  • Filesystem Path: components/02-components/product-features/product-features.twig