Responsive Featured Section

By Laurel Beyers

How do I use This?

A responsive "feature" section for displaying logos, thumbnails, or other content using Flexbox.

HTML


<div class="featured-items">
  <div class="row align-middle align-justify featured-items-wrapper">
    <h4 class="featured-items-title">As Featured In:</h4>
    <div class="featured-items-brands">
      <img src="https://placehold.it/150x70">
      <img src="https://placehold.it/125x60">
      <img src="https://placehold.it/150x70">
      <img src="https://placehold.it/130x50">
    </div>
  </div>
</div>

$gray: #808080;
$highlight: #4ec6cd;
$nav-text-color: $gray;
$vert-seperate: 4rem;

.featured-items {
  background: lighten($gray, 40%);
  margin-bottom: $vert-seperate;
  padding: 1rem 1rem;

  h4 {
    @media screen and (max-width: 39.9375em) {
     font-size: 1.5rem;
    }
  }

  p {
    color: $gray;
  }

  .featured-items-brands {
    flex: 1 0 auto;
    display: flex;
    justify-content: space-around;

    @media screen and (max-width: 39.9375em) {
      flex-wrap: wrap;
      width: 100%;
      }
    }

  .featured-items-title {
    margin-bottom: 0;
  }

    @media screen and (max-width: 39.9375em) {
      .featured-items-brands img {
        flex-basis: 40%;
        margin-bottom: 1rem;
      }

      .featured-items-title {
        margin-bottom: 1rem;
      }
    }
}

.featured-items {
  background: #e6e6e6;
  margin-bottom: 4rem;
  padding: 1rem 1rem;
}

@media screen and (max-width: 39.9375em) {
  .featured-items h4 {
    font-size: 1.5rem;
  }
}

.featured-items p {
  color: #808080;
}

.featured-items .featured-items-brands {
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}

@media screen and (max-width: 39.9375em) {
  .featured-items .featured-items-brands {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    width: 100%;
  }
}

.featured-items .featured-items-title {
  margin-bottom: 0;
}

@media screen and (max-width: 39.9375em) {
  .featured-items .featured-items-brands img {
    -webkit-flex-basis: 40%;
        -ms-flex-preferred-size: 40%;
            flex-basis: 40%;
    margin-bottom: 1rem;
  }
  .featured-items .featured-items-title {
    margin-bottom: 1rem;
  }
}

Responsive Featured Section

By Laurel Beyers

People you might know

Dashboard Number Card

Testimonial Slider

Responsive Featured Section

By Laurel Beyers

Similar Building Blocks

People you might know

Dashboard Number Card

Testimonial Slider