Marketing Site Feature Section

By Rafi

F6 Line Created with Sketch.
feature image icons content mobile first flexbox grid
How do I use This?

A responsive feature section to show off the goods.

HTML
<div class="marketing-site-features">
  <h2 class="marketing-site-features-headline">Yeti Approved Features</h2>
  <p class="marketing-site-features-subheadline subheader">Lorem ipsum dolor sit amet, consectetur adipisicing elit quaerat eos words and phrases.</p>
  <div class="row">
    <div class="small-12 medium-3 columns">
      <i class="fa fa-snowflake-o" aria-hidden="true"></i>
      <h4 class="marketing-site-features-title">Special Snowflake</h4>
      <p class="marketing-site-features-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="small-12 medium-3 columns">
      <i class="fa fa-angellist" aria-hidden="true"></i>
      <h4 class="marketing-site-features-title">Friendly Forms </h4>
      <p class="marketing-site-features-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="small-12 medium-3 columns">
      <i class="fa fa-bullseye" aria-hidden="true"></i>
      <h4 class="marketing-site-features-title">Special Snowflake</h4>
      <p class="marketing-site-features-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="small-12 medium-3 columns">
      <i class="fa fa-battery-full" aria-hidden="true"></i>
      <h4 class="marketing-site-features-title">Lithium Ion</h4>
      <p class="marketing-site-features-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
</div>


.marketing-site-features {
  text-align: center;
  padding: 2rem 0;

  .fa {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: $primary-color;
  }

  .marketing-site-features-title {
    font-size: 1.125rem;
    margin-bottom: 1rem;
  }

  @media screen and (min-width: 40em) {
    text-align: left;
  }
}

.marketing-site-features-headline {
  text-align: center;
  font-size: 24px;
}

.marketing-site-features-subheadline {
  margin-bottom: 2rem;
  text-align: center;
}



.marketing-site-features {
  text-align: center;
  padding: 2rem 0;
}

.marketing-site-features .fa {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #1779ba;
}

.marketing-site-features .marketing-site-features-title {
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

@media screen and (min-width: 40em) {
  .marketing-site-features {
    text-align: left;
  }
}

.marketing-site-features-headline {
  text-align: center;
  font-size: 24px;
}

.marketing-site-features-subheadline {
  margin-bottom: 2rem;
  text-align: center;
}
JS

Similar Building Blocks

containers

Full Screen Hero

F6
by Rafi
containers

Marketing Site 3-up Feature Section

F6
by Rafi
containers

Article Card Hover

F6
by Laurel Beyers