Product Feature Section

By Rafi

feature content icons product layout grid flexbox ecommerce sales

How do I use This?

Feature sections to show off or detail how awesome your product is. On smaller screens, icons shift above the text to fit nicely.

HTML

<section class="product-feature-section">
  <div class="product-feature-section-outer">
    <h4 class="product-feature-section-headline">Yeti Sightings Increase After Unclosed &lt;div&gt; Tag Scare</h4>

    <div class="product-feature-section-inner">

      <div class="product-feature-section-feature top-left">
        <i class="fa fa-shield" aria-hidden="true"></i>
        <div>
          <p class="feature-title">Thick Fur Coat</p>
          <p class="feature-desc">Can withstand extreme cold</p>
        </div>
      </div>

      <div class="product-feature-section-feature top-right">
        <i class="fa fa-heart" aria-hidden="true"></i>
        <div>
          <p class="feature-title">Super Loveable</p>
          <p class="feature-desc">Great at code and hugs</p>
        </div>
      </div>

      <div class="product-feature-section-feature bottom-left">
        <i class="fa fa-coffee" aria-hidden="true"></i>
        <div>
          <p class="feature-title">Cave Expert</p>
          <p class="feature-desc">Makes any hole a home</p>
        </div>
      </div>

      <div class="product-feature-section-feature bottom-right">
        <i class="fa fa-map-marker" aria-hidden="true"></i>
        <div>
          <p class="feature-title">Abominable Snowman</p>
          <p class="feature-desc">Hails from the Himalayans</p>
        </div>
      </div>

    </div>
  </div>
</section>

$product-feature-section-large-width: 75%;
$product-feature-section-bg: $light-gray;
$product-feature-section-divider-color: $medium-gray;

.product-feature-section {
  background: $product-feature-section-bg;
  padding: 1rem;
}

.product-feature-section-outer {
  display: flex;
  max-width: 100%;
  margin: 0 auto;
  flex-direction: column;

  @include breakpoint(medium) {
    max-width: $product-feature-section-large-width;
  }
}

.product-feature-section-headline {
  margin-bottom: 2rem;
  text-align: center;
}

.product-feature-section-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.product-feature-section-feature {
  display: flex;
  align-items: flex-start;
  padding: 1rem;
  flex: 1 0 50%;
  justify-content: flex-start;
  flex-direction: column;

  &.top-left {
    border-right: 1px solid $product-feature-section-divider-color;
    border-bottom: 1px solid $product-feature-section-divider-color;
  }

  &.top-right {
    border-bottom: 1px solid $product-feature-section-divider-color;
  }

  &.bottom-left {
    border-right: 1px solid $product-feature-section-divider-color;
  }

  .feature-title {
    margin-bottom: 0;
    line-height: 16px;
    font-size: 0.875rem;
  }

  .feature-desc {
    margin-bottom: 0;
  }

  .fa {
    margin-right: 1.25rem;
    font-size: 2rem;
  }

  @include breakpoint(medium) {
    padding: 2rem;
    flex: 1 0 50%;
    justify-content: flex-start;
    flex-direction: row;
  }
}

.product-feature-section {
  background: #e6e6e6;
  padding: 1rem;
}

.product-feature-section-outer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 100%;
  margin: 0 auto;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media print, screen and (min-width: 40em) {
  .product-feature-section-outer {
    max-width: 75%;
  }
}

.product-feature-section-headline {
  margin-bottom: 2rem;
  text-align: center;
}

.product-feature-section-inner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.product-feature-section-feature {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 1rem;
  -webkit-flex: 1 0 50%;
      -ms-flex: 1 0 50%;
          flex: 1 0 50%;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.product-feature-section-feature.top-left {
  border-right: 1px solid #cacaca;
  border-bottom: 1px solid #cacaca;
}

.product-feature-section-feature.top-right {
  border-bottom: 1px solid #cacaca;
}

.product-feature-section-feature.bottom-left {
  border-right: 1px solid #cacaca;
}

.product-feature-section-feature .feature-title {
  margin-bottom: 0;
  line-height: 16px;
  font-size: 0.875rem;
}

.product-feature-section-feature .feature-desc {
  margin-bottom: 0;
}

.product-feature-section-feature .fa {
  margin-right: 1.25rem;
  font-size: 2rem;
}

@media print, screen and (min-width: 40em) {
  .product-feature-section-feature {
    padding: 2rem;
    -webkit-flex: 1 0 50%;
        -ms-flex: 1 0 50%;
            flex: 1 0 50%;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

Product Feature Section

By Rafi

Marketing Site Feature Section

Responsive Blog Footer

Featured Testimonials

Product Feature Section

By Rafi

Similar Building Blocks

Marketing Site Feature Section

Responsive Blog Footer

Featured Testimonials