HTML & CSS Logo Cloud Components

(Mostly)Ready to use Logo Cloud components. Copy and paste these HTML & CSS components and build your awesome website. Use this to kickstart your component and customize to meet your needs.

Partners With Trusted Brands

Heirloom tbh shabby chic godard aesthetic, beard hell of succulents gatekeep photo booth vice shoreditch pitchfork waistcoat. Ramps shabby chic cupping hashtag sus. Grailed swag thundercats praxis typewriter organic quinoa shabby chic sriracha.

<div class="block">
  <div class="wrapper-lg text-align-center text-color-white">
    <h2>Partners With Trusted Brands</h2>
    <p class="margin-inline-auto">Heirloom tbh shabby chic godard aesthetic, beard hell of succulents gatekeep photo booth vice shoreditch pitchfork waistcoat. Ramps shabby chic cupping hashtag sus. Grailed swag thundercats praxis typewriter organic quinoa shabby chic sriracha.</p>
    <ul class="logo-grid max-width-none no-padding mt-6">
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
    </ul>
  </div>
</div>

.logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    @include breakpoint(md) {
        grid-template-columns: repeat(4, 1fr);
    }
}

.brand-card {
    display: grid;
    place-items: center;
    height: 150px;
}

.brand-card img {
    width: 100%;
    max-width: 150px;
    height: auto;
    max-height: 75px;

    @include breakpoint(md) { 
        max-width: 225px;
        max-height: 100px;
    }
}

Our Clients

<div class="block logo-cloud--simple">
  <div class="wrapper-lg text-color-white">
    <div class="grid gap-sm">
        <div class="grid-12 grid-2-md margin-block-auto">
            <h2 class="h4 no-margin">Our Clients</h2>
        </div>
        <div class="grid-12 grid-10-md">
            <ul class="logo-grid max-width-none no-padding">
                <li class="list-style-none no-margin">
                    <a href="#" target="_blank" rel="noreferrer noopener">
                        <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
                    </a>
                </li>        
                <li class="list-style-none no-margin">
                    <a href="#" target="_blank" rel="noreferrer noopener">
                        <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
                    </a>
                </li>        
                <li class="list-style-none no-margin">
                    <a href="#" target="_blank" rel="noreferrer noopener">
                        <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
                    </a>
                </li>        
                <li class="list-style-none no-margin">
                    <a href="#" target="_blank" rel="noreferrer noopener">
                        <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
                    </a>
                </li>        
                <li class="list-style-none no-margin">
                    <a href="#" target="_blank" rel="noreferrer noopener">
                        <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
                    </a>
                </li>        
                <li class="list-style-none no-margin">
                    <a href="#" target="_blank" rel="noreferrer noopener">
                        <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
                    </a>
                </li>        
            </ul>
        </div>
    </div>
  </div>
</div>

.logo-cloud--simple .logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $ic-400;

    @include breakpoint(md) {
        grid-template-columns: repeat(3, 1fr);
    }

    @include breakpoint(md) {
        grid-template-columns: repeat(6, 1fr);
    }
}

Partners With Trusted Brands

Heirloom tbh shabby chic godard aesthetic, beard hell of succulents gatekeep photo booth vice shoreditch pitchfork waistcoat. Ramps shabby chic cupping hashtag sus. Grailed swag thundercats praxis typewriter organic quinoa shabby chic sriracha.

<div class="block logo-cloud logo-cloud--split">
    <div class="wrapper-lg grid gap-lg">
        <div class="logo-cloud__body grid-12 grid-6-md bg-primary text-color-white flow">
            <h2>Partners With Trusted Brands</h2>
            <p class="margin-inline-auto">Heirloom tbh shabby chic godard aesthetic, beard hell of succulents gatekeep photo booth vice shoreditch pitchfork waistcoat. Ramps shabby chic cupping hashtag sus. Grailed swag thundercats praxis typewriter organic quinoa shabby chic sriracha.</p>
        </div>
        <div class="grid-12 grid-6-md margin-block-auto">
            <ul class="logo-grid max-width-none no-padding">
                <li class="list-style-none no-margin">
                    <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
                        <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
                    </a>
                </li>        
                <li class="list-style-none no-margin">
                    <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
                        <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
                    </a>
                </li>        
                <li class="list-style-none no-margin">
                    <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
                        <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
                    </a>
                </li>        
                <li class="list-style-none no-margin">
                    <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
                        <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
                    </a>
                </li>        
                <li class="list-style-none no-margin">
                    <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
                        <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
                    </a>
                </li>        
                <li class="list-style-none no-margin">
                    <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
                        <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
                    </a>
                </li>              
            </ul>
        </div>
    </div>
</div>

.logo-cloud__body {
    padding: $ic-600;
}

.logo-cloud--split .logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $ic-200;

    @include breakpoint(md) {
        grid-template-columns: repeat(3, 1fr);
    }
}

.logo-cloud--split .brand-card {
    display: grid;
    place-items: center;
    height: 100px;
}

Partners With Trusted Brands

Heirloom tbh shabby chic godard aesthetic, beard hell of succulents gatekeep photo booth vice shoreditch pitchfork waistcoat. Ramps shabby chic cupping hashtag sus. Grailed swag thundercats praxis typewriter organic quinoa shabby chic sriracha.

<div class="block">
  <div class="wrapper-lg text-align-center text-color-white">
    <h2>Partners With Trusted Brands</h2>
    <p class="margin-inline-auto">Heirloom tbh shabby chic godard aesthetic, beard hell of succulents gatekeep photo booth vice shoreditch pitchfork waistcoat. Ramps shabby chic cupping hashtag sus. Grailed swag thundercats praxis typewriter organic quinoa shabby chic sriracha.</p>
    <ul class="logo-grid logo-grid--bordered-dividers max-width-none no-padding mt-6">
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
    </ul>
  </div>
</div>

.logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    @include breakpoint(md) {
        grid-template-columns: repeat(4, 1fr);
    }
}

.brand-card {
    display: grid;
    place-items: center;
    height: 150px;
}

.brand-card img {
    width: 100%;
    max-width: 150px;
    height: auto;
    max-height: 75px;

    @include breakpoint(md) { 
        max-width: 225px;
        max-height: 100px;
    }
}

.logo-grid--bordered-dividers .brand-card {
    border-right: 1px solid $light-gray;
    border-bottom: 1px solid $light-gray;
}

@media (max-width: 62em) {
    .logo-grid--bordered-dividers li:nth-child(even) .brand-card {
        border-right: none;
    }
}
// adjust numbers here depending on the number of logos
.logo-grid--bordered-dividers li:nth-child(n+7):nth-child(-n+8) .brand-card {
    border-bottom: none;
}

@include breakpoint(md) {
    .logo-grid--bordered-dividers li:nth-child(4n) .brand-card {
        border-right: none;
    }
    
    // adjust numbers here depending on the number of logos
    .logo-grid--bordered-dividers li:nth-child(n+5):nth-child(-n+8) .brand-card {
        border-bottom: none;
    }
}

Partners With Trusted Brands

Heirloom tbh shabby chic godard aesthetic, beard hell of succulents gatekeep photo booth vice shoreditch pitchfork waistcoat. Ramps shabby chic cupping hashtag sus. Grailed swag thundercats praxis typewriter organic quinoa shabby chic sriracha.

<div class="block">
  <div class="wrapper-lg text-align-center text-color-white">
    <h2>Partners With Trusted Brands</h2>
    <p class="margin-inline-auto">Heirloom tbh shabby chic godard aesthetic, beard hell of succulents gatekeep photo booth vice shoreditch pitchfork waistcoat. Ramps shabby chic cupping hashtag sus. Grailed swag thundercats praxis typewriter organic quinoa shabby chic sriracha.</p>
    <ul class="logo-grid logo-grid--bordered-logo gap-sm max-width-none no-padding mt-6">
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
      <li class="list-style-none no-margin">
          <a href="#" target="_blank" rel="noreferrer noopener" class="brand-card">
              <img src="/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
          </a>
      </li>        
    </ul>
  </div>
</div>

.logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    @include breakpoint(md) {
        grid-template-columns: repeat(4, 1fr);
    }
}

.brand-card {
    display: grid;
    place-items: center;
    height: 150px;
}

.brand-card img {
    width: 100%;
    max-width: 150px;
    height: auto;
    max-height: 75px;

    @include breakpoint(md) { 
        max-width: 225px;
        max-height: 100px;
    }
}

.logo-grid--bordered-logo .brand-card {
    border: 2px solid rgba($light-gray, .3);
}

HTML & CSS Logo Cloud Components

Logo Cloud

Partners With Trusted Brands

Logo Cloud Simple

Our Clients

Logo Cloud Split

Partners With Trusted Brands

Logo Cloud With Border Dividers

Partners With Trusted Brands

Logo Cloud With Bordered Logos

Partners With Trusted Brands