Logo Wall

PREVIEW 
<div class="logo-wall">
    <h2 class="component-subtitle">LOGO WALL</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsum suscipit maxime voluptatum.</p>
    <div class="logo-wall__items">
        <!-- Logo 1 with Link -->
        <div class="logo-wall__item">
            <a href="#" class="logo-wall__link">
                <div class="logo-wall__image-wrap">
                    <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
                </div>
            </a>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- Logo 1 with Link -->

        <!-- /Logo 2 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 2 -->

        <!-- /Logo 3 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 3 -->

        <!-- Logo 4 with Link -->
        <div class="logo-wall__item">
            <a href="#" class="logo-wall__link">
                <div class="logo-wall__image-wrap">
                    <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
                </div>
            </a>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- Logo 4 with Link -->

        <!-- /Logo 5 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 5 -->

        <!-- /Logo 6 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 6 -->

        <!-- Logo 7 with Link -->
        <div class="logo-wall__item">
            <a href="#" class="logo-wall__link">
                <div class="logo-wall__image-wrap">
                    <img src="/images/logo-paramount-large.svg" alt="" class="logo-wall__image" />
                </div>
            </a>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- Logo 7 with Link -->

        <!-- /Logo 8 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 8 -->

        <!-- /Logo 9 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 9 -->

        <!-- Logo 10 with Link -->
        <div class="logo-wall__item">
            <a href="#" class="logo-wall__link">
                <div class="logo-wall__image-wrap">
                    <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
                </div>
            </a>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- Logo 10 with Link -->

        <!-- /Logo 11 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 11 -->

        <!-- /Logo 12 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 12 -->

        <!-- Logo 13 with Link -->
        <div class="logo-wall__item">
            <a href="#" class="logo-wall__link">
                <div class="logo-wall__image-wrap">
                    <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
                </div>
            </a>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- Logo 13 with Link -->

        <!-- /Logo 14 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 14 -->

        <!-- /Logo 15 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 15 -->

        <!-- Logo 16 with Link -->
        <div class="logo-wall__item">
            <a href="#" class="logo-wall__link">
                <div class="logo-wall__image-wrap">
                    <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
                </div>
            </a>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- Logo 16 with Link -->

        <!-- /Logo 17 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 17 -->

        <!-- /Logo 18 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 18 -->

        <!-- Logo 19 with Link -->
        <div class="logo-wall__item">
            <a href="#" class="logo-wall__link">
                <div class="logo-wall__image-wrap">
                    <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
                </div>
            </a>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- Logo 19 with Link -->

        <!-- /Logo 20 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 20 -->

        <!-- /Logo 21 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 21 -->

        <!-- Logo 22 with Link -->
        <div class="logo-wall__item">
            <a href="#" class="logo-wall__link">
                <div class="logo-wall__image-wrap">
                    <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
                </div>
            </a>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- Logo 22 with Link -->

        <!-- /Logo 23 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 23 -->

        <!-- /Logo 24 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 24 -->

        <!-- Logo 25 with Link -->
        <div class="logo-wall__item">
            <a href="#" class="logo-wall__link">
                <div class="logo-wall__image-wrap">
                    <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
                </div>
            </a>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- Logo 25 with Link -->

        <!-- /Logo 26 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 26 -->

        <!-- /Logo 27 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 27 -->

        <!-- Logo 28 with Link -->
        <div class="logo-wall__item">
            <a href="#" class="logo-wall__link">
                <div class="logo-wall__image-wrap">
                    <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
                </div>
            </a>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- Logo 28 with Link -->

        <!-- /Logo 29 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 29 -->

        <!-- /Logo 30 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 30 -->

        <!-- Logo 31 with Link -->
        <div class="logo-wall__item">
            <a href="#" class="logo-wall__link">
                <div class="logo-wall__image-wrap">
                    <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
                </div>
            </a>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- Logo 31 with Link -->

        <!-- /Logo 32 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 32 -->

        <!-- /Logo 33 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 33 -->

        <!-- Logo 34 with Link -->
        <div class="logo-wall__item">
            <a href="#" class="logo-wall__link">
                <div class="logo-wall__image-wrap">
                    <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
                </div>
            </a>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- Logo 34 with Link -->

        <!-- /Logo 35 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 35 -->

        <!-- /Logo 36 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 36 -->

        <!-- Logo 37 with Link -->
        <div class="logo-wall__item">
            <a href="#" class="logo-wall__link">
                <div class="logo-wall__image-wrap">
                    <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
                </div>
            </a>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- Logo 37 with Link -->

        <!-- /Logo 38 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 38 -->

        <!-- /Logo 39 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 39 -->

        <!-- Logo 40 with Link -->
        <div class="logo-wall__item">
            <a href="#" class="logo-wall__link">
                <div class="logo-wall__image-wrap">
                    <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
                </div>
            </a>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- Logo 40 with Link -->

        <!-- /Logo 41 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 41 -->

        <!-- /Logo 42 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 42 -->

        <!-- Logo 43 with Link -->
        <div class="logo-wall__item">
            <a href="#" class="logo-wall__link">
                <div class="logo-wall__image-wrap">
                    <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
                </div>
            </a>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- Logo 43 with Link -->

        <!-- /Logo 44 -->
        <div class="logo-wall__item">
            <div class="logo-wall__image-wrap">
                <img src="https://via.placeholder.com/96x96" alt="" class="logo-wall__image" />
            </div>
            <a href="#" class="btn btn-primary logo-wall__action">Download</a>
        </div>
        <!-- /Logo 44 -->
    </div>
</div>

.logo-wall {
  margin-bottom: 4rem;
}

.logo-wall__items {
  display: flex;
  flex-wrap: wrap;
  margin-left: -2.4rem;
}

.logo-wall__item {
  flex: 1 1 100%;
  position: relative;
  background-color: $color-base-grey;
  margin-left: 2.4rem;
  margin-bottom: 2.4rem;
  padding-top: 1.6rem;
  padding-bottom: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;

  @media (min-width: $breakpoint-tablet) {
    flex: 0 0 calc(50% - 2.4rem);
  }

  @media (min-width: $breakpoint-desktop) {
    flex: 0 0 calc(25% - 2.4rem);
  }
}

.logo-wall__image-wrap {
  border-radius: 50%;
  background-color: $color-blue-medium;
  height: 14.4rem;
  width: 14.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-wall__image {
  display: block;
  max-width: 9.6rem;
  max-height: 9.6rem;
}

.logo-wall__link {
  border-radius: 50%;
  background-color: $color-blue-medium;

  &:hover {
    background-color: $color-blue-dark;
  }

  &::after {
    content: "\f08e";
    font-family: "FontAwesome";
    font-size: 2rem;
    position: absolute;
    bottom: 0;
    left: 0.8rem;
  }

  .logo-wall__image-wrap {
    background-color: transparent;
  }
}

.logo-wall__action {
  position: absolute;
  right: 0;
  bottom: 0;
}
URL copied to clipboard!