A Partner Logos Section is used to display sponsor or partner brands in a clean and structured way. This can be in a grid format or a scrolling carousel for better visibility.
Three Logos
Lorem ipsum dolor
Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
<section class="partner-logo-wrapper">
<div class="container">
<div class="text--center">
<h3 class="large-text-3">Lorem ipsum dolor</h3>
<p class="para--two">Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
</div>
<div class="logo-container three-logos">
<div class="display--flex logo-wrapper">
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="isb logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="kellogg logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="IIMC logo">
</a>
</div>
<div class="text--center body-txt-parent">
<p class="para--four m-a-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
</div>
</div>
</div>
</section>Three Logos On Mobile
Lorem ipsum dolor(Minimum 767px)
Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
<section class="partner-logo-wrapper">
<div class="container">
<div class="text--center">
<h3 class="large-text-3">Lorem ipsum dolor(Minimum 767px)</h3>
<p class="para--two">Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
</div>
<div class="logo-container three-logos">
<div class="display--flex logo-wrapper">
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="isb logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="kellogg logo"/>
</a>
</div>
<div class="display--flex logo-wrapper">
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="mit logo"/>
</a>
</div>
<div class="text--center body-txt-parent">
<p class="para--four m-a-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
</div>
</div>
</div>
</section>Four Logos
Lorem ipsum dolor
Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
<section class="partner-logo-wrapper">
<div class="container">
<div class="text--center">
<h3 class="large-text-3">Lorem ipsum dolor</h3>
<p class="para--two">Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
</div>
<div class="logo-container four-logos">
<div class="display--flex logo-wrapper">
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="isb logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="kellogg logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="mit logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="IIMC logo"/>
</a>
</div>
</div>
</div>
</section>Four Logos On Mobile
Lorem ipsum dolor(Minimum 767px)
Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
<section class="partner-logo-wrapper">
<div class="container">
<div class="text--center">
<h3 class="large-text-3">Lorem ipsum dolor(Minimum 767px)</h3>
<p class="para--two">Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
</div>
<div class="logo-container four-logos">
<div class="display--flex logo-wrapper">
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="isb logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="kellogg logo"/>
</a>
</div>
<div class="display--flex logo-wrapper">
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="mit logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="IIMC logo"/>
</a>
</div>
<div class="text--center body-txt-parent">
<p class="para--four m-a-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
</div>
</div>
</div>
</section>Five Logos
Lorem ipsum dolor: Above 1400 Resolution (Static)
Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
<section class="common-slider">
<div class="container">
<div class="text--center">
<h3 class="large-text-3">Lorem ipsum dolor: Above 1400 Resolution (Static)</h3>
<p class="para--two">Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
</div>
<div class="logo-container five-logos">
<div class="display--flex logo-wrapper">
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="isb logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="kellogg logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="IIMC logo">
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="mit logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="IIMC logo"/>
</a>
</div>
<div class="text--center body-txt-parent">
<p class="para--four m-a-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
</div>
</div>
</div>
</section>
Five Logos On Tablet
Lorem ipsum dolor: Below 1400 Resolution (Static)
Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
<section class="common-slider">
<div class="container">
<div class="text--center">
<h3 class="large-text-3">Lorem ipsum dolor: Below 1400 Resolution (Static)</h3>
<p class="para--two">Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
</div>
<div class="logo-container five-logos">
<div class="display--flex logo-wrapper">
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="isb logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="kellogg logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="IIMC logo">
</a>
</div>
<div class="display--flex logo-wrapper">
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="isb logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="kellogg logo"/>
</a>
</div>
<div class="text--center body-txt-parent">
<p class="para--four m-a-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
</div>
</div>
</div>
</section>
Logos On Mobile
Lorem ipsum dolor(Minimum 767px)
Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
<section class="common-slider">
<div class="container">
<div class="text--center">
<h3 class="large-text-3">Lorem ipsum dolor(Minimum 767px)</h3>
<p class="para--two">Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
</div>
<div class="logo-container four-logos">
<div class="display--flex logo-wrapper">
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="isb logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="kellogg logo"/>
</a>
</div>
<div class="display--flex logo-wrapper">
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="mit logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="IIMC logo"/>
</a>
</div>
<div class="text--center body-txt-parent">
<p class="para--four m-a-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
</div>
</div>
</div>
</section>More Than Four Logos
Lorem ipsum dolor
Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
<section class="common-slider">
<div class="container">
<div class="text--center">
<h3 class="large-text-3">Lorem ipsum dolor</h3>
<p class="para--two">Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
</div>
<div class="slider">
<div class="slider__list">
<div class="slider__track">
<div class="slider__slide slider__slide-active">
<div class="display--flex logo-wrapper">
<a href="#" class="logo-parent">
<img
class="logo"
src="./assets/component-images/240*80px.svg"
alt="isb logo"
/>
</a>
<a href="#" class="logo-parent">
<img
class="logo"
src="./assets/component-images/240*80px.svg"
alt="kellogg logo"
/>
</a>
<a href="#" class="logo-parent">
<img
class="logo"
src="./assets/component-images/240*80px.svg"
alt="mit logo"
/>
</a>
<a href="#" class="logo-parent">
<img
class="logo"
src="./assets/component-images/240*80px.svg"
alt="IIMC logo"
/>
</a>
</div>
</div>
<div class="slider__slide">
<a href="#" class="logo-parent">
<img
class="logo"
src="./assets/component-images/240*80px.svg"
alt="isb logo"
/>
</a>
<a href="#" class="logo-parent">
<img
class="logo"
src="./assets/component-images/240*80px.svg"
alt="kellogg logo"
/>
</a>
<a href="#" class="logo-parent">
<img
class="logo"
src="./assets/component-images/240*80px.svg"
alt="mit logo"
/>
</a>
<a href="#" class="logo-parent">
<img
class="logo"
src="./assets/component-images/240*80px.svg"
alt="IIMC logo"
/>
</a>
</div>
</div>
</div>
</div>
</div>
</section>More Than Four Logos Slider
Lorem ipsum dolor
Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
<section class="common-slider manual-slider">
<div class="container">
<div class="text--center">
<h3 class="large-text-3">Lorem ipsum dolor</h3>
<p class="para--two">
Lorem ipsum: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad
</p>
</div>
<div class="slider">
<div class="slider__list">
<div class="slider__track">
<div class="slider__slide slider__slide-active">
<div class="display--flex logo-wrapper">
<a href="#" class="logo-parent">
<img
class="logo"
src="./assets/component-images/240*80px.svg"
alt="isb logo"
/>
</a>
<a href="#" class="logo-parent">
<img
class="logo"
src="./assets/component-images/240*80px.svg"
alt="kellogg logo"
/>
</a>
<a href="#" class="logo-parent">
<img
class="logo"
src="./assets/component-images/240*80px.svg"
alt="mit logo"
/>
</a>
<a href="#" class="logo-parent">
<img
class="logo"
src="./assets/component-images/240*80px.svg"
alt="IIMC logo"
/>
</a>
</div>
</div>
<div class="slider__slide">
<a href="#" class="logo-parent">
<img
class="logo"
src="./assets/component-images/240*80px.svg"
alt="isb logo"
/>
</a>
<a href="#" class="logo-parent">
<img
class="logo"
src="./assets/component-images/240*80px.svg"
alt="kellogg logo"
/>
</a>
<a href="#" class="logo-parent">
<img
class="logo"
src="./assets/component-images/240*80px.svg"
alt="mit logo"
/>
</a>
<a href="#" class="logo-parent">
<img
class="logo"
src="./assets/component-images/240*80px.svg"
alt="IIMC logo"
/>
</a>
</div>
</div>
<div class="slider__action">
<button
data-testid="prev-btn"
class="slider__arrow slider__prev blueprint-icon icon-chevron_left"
aria-label="Previous slide"
role="button"
tabindex="0"
aria-controls="slider-list"
></button>
<div class="slider__dots">
<button
class="slider__active bg-accent"
aria-current="true"
role="button"
tabindex="0"
aria-controls="slider-list"
></button>
<button
class=""
role="button"
tabindex="0"
aria-controls="slider-list"
></button>
</div>
<button
data-testid="next-btn"
class="slider__arrow slider__next blueprint-icon icon-chevron_right"
aria-label="Next slide"
role="button"
tabindex="0"
aria-controls="slider-list"
></button>
</div>
</div>
</div>
</div>
</section>