There are no notes for this item.
<div class="container">
<div class="features">
<div class="features__feature feature">
<div class="feature__icon">
<img src="http://dummyimage.com/50x40/ff675b/fff.png&text=icon" alt="">
</div>
<h4 class="feature__headline">One Great Headline</h4>
<p class="feature__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae.</p>
<a href="" class="feature__action button">Learn More</a>
</div>
<div class="feature">
<h4 class="feature__headline">One Great Headline</h4>
<div class="feature__icon">
<img src="http://dummyimage.com/50x40/ff675b/fff.png&text=icon" alt="">
</div>
<p class="feature__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="" class="feature__action button">Learn More</a>
</div>
<div class="feature">
<div class="feature__icon">
<img src="http://dummyimage.com/50x40/ff675b/fff.png&text=icon" alt="">
</div>
<h4 class="feature__headline">One Great Headline</h4>
<p class="feature__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae tempora distinctio numquam iusto sed iure impedit.</p>
<a href="" class="feature__action button">Learn More</a>
</div>
</div>
</div>
///
/// FEATURES holds three modules in one row. Powered by flexbox,
/// this allows for a bottom alignment of an optional button.
///
/// $gutter
/// Width between features when displayed side by side.
///
@mixin features($gutter: 3rem) {
@include breakpoint(lg) {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
&__feature {
display: flex;
flex: 1 0 0%;
flex-direction: column;
margin-left: $gutter;
margin-right: 0;
}
&__feature:not(:first-child) {
margin-left: $gutter;
}
}
}