Marketing Site Feature Section

By Rafi

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;
}

Marketing Site Feature Section

By Rafi

Full Screen Hero

Marketing Site 3-up Feature Section

Article Card Hover

Marketing Site Feature Section

By Rafi

Similar Building Blocks

Full Screen Hero

Marketing Site 3-up Feature Section

Article Card Hover