Four Up Feature

By Laurel Beyers

F6
#
How do I use This?

Four sections that can feature products, people or functions of a product.

HTML
<section class="four-up-feature">
  <div class="row four-up-feature-header align-center">
    <div class="medium-8 columns">
      <h2>This is the Sizzling Title Area</h2>
      <h5> Picanha flank cupim short loin, swine biltong kevin meatloaf filet mignon bresaola shankle venison. Leberkas jerky kevin doner pork loin ground round.</h5>
    </div>
  </div>
  <div class="row align-spaced">
    <div class="small-10 medium-3 columns">
      <img class="four-up-feature-image" src="https://placehold.it/75" alt="icon">
      <h4>Item One</h4>
      <p class="four-up-feature-text">Bacon ipsum dolor amet biltong short ribs cupim brisket, prosciutto flank t-bone ball tip porchetta sirloin.</p>
    </div>
    <div class="small-10 medium-3 columns">
      <img class="four-up-feature-image" src="https://placehold.it/75" alt="icon">
      <h4>Item Two</h4>
      <p class="four-up-feature-text"> Leberkas jerky kevin doner pork loin ground round landjaeger chicken ham hock brisket bresaola shankle. </p>
    </div>
    <div class="small-10 medium-3 columns">
      <img class="four-up-feature-image" src="https://placehold.it/75" alt="icon">
      <h4>Item Three</h4>
      <p class="four-up-feature-text">Alcatra doner pastrami salami. Does your lorem ipsum text long for something a little meatier?</p>
    </div>
    <div class="small-10 medium-3 columns">
      <img class="four-up-feature-image" src="https://placehold.it/75" alt="icon">
      <h4>Item Four</h4>
      <p class="four-up-feature-text">Alcatra doner pastrami salami. Does your lorem ipsum text long for something a little meatier?</p>
    </div>
  </div>
</section>

.four-up-feature {
  text-align: center;

  .four-up-feature-header {
    margin-bottom: 3rem;
    display: flex;
  }

  .four-up-feature-image {
    margin-bottom: 2rem;
  }

  .four-up-feature-text {
    margin-bottom: 2rem;
  }
}


.four-up-feature {
  text-align: center;
}

.four-up-feature .four-up-feature-header {
  margin-bottom: 3rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.four-up-feature .four-up-feature-image {
  margin-bottom: 2rem;
}

.four-up-feature .four-up-feature-text {
  margin-bottom: 2rem;
}

JS