View on GitHub

Logos

The Logos component within the OpenFrontend.Framework is designed to display a list of logos in a structured and visually appealing manner.

On this page

With its flexible design, this component automatically adjusts columns based on the size of the logo images, ensuring a seamless and responsive presentation.

Usage

To use the logos component you have to add the .logos CSS class to the wrapping element. It will enable the CSS variables for the .logos-item elements inside it.

Then, you should choose the way the logos will be presented, for example using the .logos-row or .logos-carousel CSS class. See the examples below for more information.

Examples

Logos in a row

Logos in a row are automatically arranged, and columns adjust to the size of the image. Use the .logos-row CSS class to display them in a row.

html

<div class="logos logos-row">
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
</div>

Logos in columns

By adding specific classes, you can define the number of logos visible in a row, ranging from 1-12.

html

<div class="logos logos-row row-cols-4 row-cols-sm-6 row-cols-md-8">
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
</div>

Logos in carousel

You can also embed logos inside a carousel like show in the example below using the .logos-carousel CSS class.

Note that the --bs-logos-gap CSS variable will no longer work here. Instead, define the gap between logos in the carousel settings using the spaceBetween configuration value.

html

<div class="heading-action justify-content-end">
  <div class="carousel-navigation">
    <button type="button" class="carousel-button-prev btn btn-square btn-primary" id="carousel-btn-prev-1">
      <svg class="of-icon" width="32" height="32" fill="currentColor">
      	<use href="/assets/icons/bootstrap-icons.svg#caret-left-fill"/>
      </svg>
      

    </button>
    <button type="button" class="carousel-button-next btn btn-square btn-primary" id="carousel-btn-next-1">
      <svg class="of-icon" width="32" height="32" fill="currentColor">
      	<use href="/assets/icons/bootstrap-icons.svg#caret-right-fill"/>
      </svg>
      

    </button>
  </div>
</div>

<div class="logos logos-carousel">
  <div class="carousel">
    <div class="swiper" data-of-carousel='{
      "slidesPerView": 2,
      "spaceBetween": 24,
      "navigationNext": "#carousel-btn-next-1",
      "navigationPrev": "#carousel-btn-prev-1",
       "breakpoints": {
        "md": {
          "slidesPerView": 3
        },
        "lg": {
          "slidesPerView": 4
        },
        "xxl": {
          "slidesPerView": 5
        }
      }
    }'>
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="logos-item">
            <figure>
              <a href="#">
                <img src="..." alt="...">
              </a>
            </figure>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="logos-item">
            <figure>
              <a href="#">
                <img src="..." alt="...">
              </a>
            </figure>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="logos-item">
            <figure>
              <a href="#">
                <img src="..." alt="...">
              </a>
            </figure>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="logos-item">
            <figure>
              <a href="#">
                <img src="..." alt="...">
              </a>
            </figure>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="logos-item">
            <figure>
              <a href="#">
                <img src="..." alt="...">
              </a>
            </figure>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="logos-item">
            <figure>
              <a href="#">
                <img src="..." alt="...">
              </a>
            </figure>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="logos-item">
            <figure>
              <a href="#">
                <img src="..." alt="...">
              </a>
            </figure>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Define logo dimensions

By setting CSS variable values such as --bs-logos-item-max-width and --bs-logos-item-max-height, you can specify the maximum size of the logo element.

html

<div class="logos logos-row" style="--bs-logos-item-max-width: 60px; --bs-logos-item-max-height: 60px">
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
</div>

Custom styling

The component allows for custom styling of the box containing the logo. See the list of style variables at the end of the page for the full reference.

html

<div class="logos logos-row" style="--bs-logos-item-bg: #f8f9fa; --bs-logos-item-padding-y: 10px; --bs-logos-item-padding-x: 10px; --bs-logos-item-border-radius: 5px; --bs-logos-item-border-width: 1px; --bs-logos-item-border-style: solid; --bs-logos-item-border-color: #dee2e6;  --bs-logos-item-max-width: 80px; --bs-logos-item-max-height: 80px">
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
  <div>
    <div class="logos-item">
      <figure>
        <a href="#">
          <img src="..." alt="...">
        </a>
      </figure>
    </div>
  </div>
</div>

CSS

For those looking to dive deeper into customization, the Logos component provides a set of SCSS variables. These variables allow for fine-tuning of gaps, margins, padding, background colors, borders, and more.

Variables

src/scss/_logos.scss

--#{$prefix}logos-gap: #{$logos-gap};
--#{$prefix}logos-margin-bottom: #{$logos-margin-bottom};
--#{$prefix}logos-item-max-height: #{$logos-item-max-height};
--#{$prefix}logos-item-max-width: #{$logos-item-max-width};
--#{$prefix}logos-item-padding-y: #{$logos-item-padding-y};
--#{$prefix}logos-item-padding-x: #{$logos-item-padding-x};
--#{$prefix}logos-item-bg: #{$logos-item-bg};
--#{$prefix}logos-item-border-style: #{$logos-item-border-style};
--#{$prefix}logos-item-border-width: #{$logos-item-border-width};
--#{$prefix}logos-item-border-color: #{$logos-item-border-color};
--#{$prefix}logos-item-border-radius: #{$logos-item-border-radius};

Sass variables

src/scss/_variables.scss

$logos-gap: 1rem;
$logos-margin-bottom: 1rem;
$logos-item-max-width: null;
$logos-item-max-height: null;
$logos-item-bg: null;
$logos-item-padding-y: null;
$logos-item-padding-x: null;
$logos-item-border-style: null;
$logos-item-border-width: null;
$logos-item-border-color: null;
$logos-item-border-radius: null;