App Feature Section

By Rafi

feature content image product layout grid flexbox ecommerce

How do I use This?

Feature sections to show off or detail how awesome your product is. On smaller screens, the image orientation changes to fit nicely on mobile devices.

HTML

<section class="app-feature-section">
  <div class="row align-middle">

    <div class="small-12 medium-3 flex-container columns">
      <img class="show-for-medium" src="https://placehold.it/158x312" alt="" />
    </div>

    <div class="small-12 medium-9 columns">
      <h4 class="app-feature-section-sub-header">Building Blocks Features</h4>
      <h3 class="app-feature-section-main-header">Plug and Play Code</h3>
      <img class="hide-for-medium" src="https://placehold.it/640x320" alt="" />
      <div class="app-feature-section-features">
        <div class="app-feature-section-features-block">
          <i class="fa fa-space-shuttle" aria-hidden="true"></i> <span>Advanced</span>
        </div>
        <div class="app-feature-section-features-block">
          <i class="fa fa-th" aria-hidden="true"></i> <span>Modular</span>
        </div>
        <div class="app-feature-section-features-block">
          <i class="fa fa-handshake-o" aria-hidden="true"></i> <span>No Conflicts</span>
        </div>
        <div class="app-feature-section-features-block">
          <i class="fa fa-fast-forward" aria-hidden="true"></i> <span>Build Fast</span>
        </div>
        <div class="app-feature-section-features-block">
          <i class="fa fa-code" aria-hidden="true"></i> <span>Clean Code</span>
        </div>
        <div class="app-feature-section-features-block">
          <i class="fa fa-mobile" aria-hidden="true"></i> <span>Responsive</span>
        </div>
      </div>
    </div>
  </div>
</section>

.app-feature-section {
  background-color: $light-gray;
  padding: $global-padding;

  @include breakpoint(medium) {
    padding: $global-padding*2;
  }
}

.app-feature-section-main-header {
  font-weight: 700;

  @include breakpoint(medium down) {
    font-size: 30px;
  }
}

.app-feature-section-sub-header {
  font-weight: 300;
  margin-bottom: 0;

  @include breakpoint(medium down) {
    font-size: 24px;
  }
}

.app-feature-section-features {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.app-feature-section-features-block {
  display: flex;
  align-items: center;
  padding: $global-padding 0;
  flex: 1 0 33.33%;
  font-size: 20px;
  white-space: nowrap;

  .fa {
    margin-right: 1rem;
    font-size: 35px;
  }

  @include breakpoint(small only) {
    flex: 1 0 50%;
    justify-content: center;
  }

  @media screen and (max-width: 25.9375em) {
    flex: 1 0 100%;
    justify-content: center;
  }
}

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

@media print, screen and (min-width: 40em) {
  .app-feature-section {
    padding: 2rem;
  }
}

.app-feature-section-main-header {
  font-weight: 700;
}

@media screen and (max-width: 63.9375em) {
  .app-feature-section-main-header {
    font-size: 30px;
  }
}

.app-feature-section-sub-header {
  font-weight: 300;
  margin-bottom: 0;
}

@media screen and (max-width: 63.9375em) {
  .app-feature-section-sub-header {
    font-size: 24px;
  }
}

.app-feature-section-features {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.app-feature-section-features-block {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 0;
  -webkit-flex: 1 0 33.33%;
      -ms-flex: 1 0 33.33%;
          flex: 1 0 33.33%;
  font-size: 20px;
  white-space: nowrap;
}

.app-feature-section-features-block .fa {
  margin-right: 1rem;
  font-size: 35px;
}

@media screen and (max-width: 39.9375em) {
  .app-feature-section-features-block {
    -webkit-flex: 1 0 50%;
        -ms-flex: 1 0 50%;
            flex: 1 0 50%;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 25.9375em) {
  .app-feature-section-features-block {
    -webkit-flex: 1 0 100%;
        -ms-flex: 1 0 100%;
            flex: 1 0 100%;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

App Feature Section

By Rafi

Product Card

Full Screen Hero

Dashboard Table

App Feature Section

By Rafi

Similar Building Blocks

Product Card

Full Screen Hero

Dashboard Table