Marketing Site 3-up 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

<section class="marketing-site-three-up">
  <h2 class="marketing-site-three-up-headline">Furry, Reliable, Cuddly</h2>
  <div class="row medium-unstack">
    <div class="columns">
      <i class="fa fa-gg" aria-hidden="true"></i>
      <h4 class="marketing-site-three-up-title">Keyless Entry</h4>
      <p class="marketing-site-three-up-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sint, voluptatibus eaque natus ad eius.</p>
    </div>
    <div class="columns">
      <i class="fa fa-user-o" aria-hidden="true"></i>
      <h4 class="marketing-site-three-up-title">Invincible Igloo</h4>
      <p class="marketing-site-three-up-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sint, voluptatibus eaque natus ad eius.</p>
    </div>
    <div class="columns">
      <i class="fa fa-check-square-o" aria-hidden="true"></i>
      <h4 class="marketing-site-three-up-title">Stereo System</h4>
      <p class="marketing-site-three-up-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sint, voluptatibus eaque natus ad eius.</p>
    </div>
  </div>
</section>

$marketing-site-three-up-width: 900px;

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

  .row {
    max-width: $marketing-site-three-up-width;
  }

  .columns {
    margin-bottom: 1rem;

    @media screen and (min-width: 40em) {
      margin-bottom: 0;
    }
  }

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

.marketing-site-three-up-headline {
  margin-bottom: 2rem;
  font-size: 24px;
}

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

.marketing-site-three-up .row {
  max-width: 900px;
}

.marketing-site-three-up .columns {
  margin-bottom: 1rem;
}

@media screen and (min-width: 40em) {
  .marketing-site-three-up .columns {
    margin-bottom: 0;
  }
}

.marketing-site-three-up .fa {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #1779ba;
}

.marketing-site-three-up-headline {
  margin-bottom: 2rem;
  font-size: 24px;
}

Marketing Site 3-up Feature Section

By Rafi

Card Reveal

CSS Grid - Card With Thumbnail

App Feature Section

Marketing Site 3-up Feature Section

By Rafi

Similar Building Blocks

Card Reveal

CSS Grid - Card With Thumbnail

App Feature Section