Multi Party banners
Single link
In order to use single link, you have to add .multiparty-banner--single class to main root element.
Explore more
<h2 class="text-center mb-4 tc-green-dark">Explore more
<section class="multiparty-banner multiparty-banner--single">
<picture class="multiparty-banner__image">
<source media="(max-width: 767px)" srcset="images/content/multiparty-1-mobile.jpg" />
<source media="(max-width: 1024px)" srcset="images/content/multiparty-1-tablet.jpg" />
<img src="images/content/multiparty-1.jpg" alt="Multiparty banner 1" />
</picture>
<div class="multiparty-banner__main">
<div class="multiparty-banner__main__col">
<h3><a href="#">h3 Headline link modul<a/></h3>
<a href="#" class="multiparty-banner__cta button button--green-inverse"><span>More</span></a>
</div>
</div>
</section>Two links
Media
<section class="multiparty-banner">
<picture class="multiparty-banner__image">
<source media="(max-width: 767px)" srcset="images/content/multiparty-1-mobile.jpg" />
<source media="(max-width: 1024px)" srcset="images/content/multiparty-1-tablet.jpg" />
<img src="images/content/multiparty-1.jpg" alt="Multiparty banner 1" />
</picture>
<div class="multiparty-banner__main">
<div class="multiparty-banner__main__col">
<h3><a href="#">h3 Headline link modul<a/></h3>
<a href="#" class="multiparty-banner__cta button button--green-inverse"><span>More</span></a>
</div>
<div class="multiparty-banner__main__col">
<h3><a href="#">h3 Headline link modul<a/></h3>
<a href="#" class="multiparty-banner__cta button button--green-inverse"><span>More</span></a>
</div>
...
</div>
</section>Three links
Media
<section class="multiparty-banner">
<picture class="multiparty-banner__image">
<source media="(max-width: 767px)" srcset="images/content/multiparty-1-mobile.jpg" />
<source media="(max-width: 1024px)" srcset="images/content/multiparty-1-tablet.jpg" />
<img src="images/content/multiparty-1.jpg" alt="Multiparty banner 1" />
</picture>
<div class="multiparty-banner__main">
<div class="multiparty-banner__main__col">
<div class="multiparty-banner__overlay"></div>
<div class="border-fix border-fix--bottom"></div>
<div class="border-fix border-fix--top"></div>
<h3><a href="#">h3 Headline link modul<a/></h3>
<div class="multiparty-banner__more">
<p>We carefully plan and manage production
processes from an active ingredient to a
finished product.</p>
<a href="#" class="multiparty-banner__cta button button--cta"><span>More 2</span></a>
</div>
</div>
<div class="multiparty-banner__main__col">
<div class="multiparty-banner__overlay"></div>
<div class="border-fix border-fix--bottom"></div>
<div class="border-fix border-fix--top"></div>
<h3><a href="#">h3 Headline link modul<a/></h3>
<div class="multiparty-banner__more">
<p>We carefully plan and manage production
processes from an active ingredient to a
finished product.</p>
<a href="#" class="multiparty-banner__cta button button--cta"><span>More 2</span></a>
</div>
</div>
<div class="multiparty-banner__main__col">
<div class="multiparty-banner__overlay"></div>
<div class="border-fix border-fix--bottom"></div>
<div class="border-fix border-fix--top"></div>
<h3><a href="#">h3 Headline link modul<a/></h3>
<div class="multiparty-banner__more">
<p>We carefully plan and manage production
processes from an active ingredient to a
finished product.</p>
<a href="#" class="multiparty-banner__cta button button--cta"><span>More 2</span></a>
</div>
</div>
...
</div>
</section>Four links
Media
<section class="multiparty-banner">
<picture class="multiparty-banner__image">
<source media="(max-width: 767px)" srcset="images/content/multiparty-1-mobile.jpg" />
<source media="(max-width: 1024px)" srcset="images/content/multiparty-1-tablet.jpg" />
<img src="images/content/multiparty-1.jpg" alt="Multiparty banner 1" />
</picture>
<div class="multiparty-banner__main">
<div class="multiparty-banner__main__col">
<div class="multiparty-banner__overlay"></div>
<div class="border-fix border-fix--bottom"></div>
<div class="border-fix border-fix--top"></div>
<h3><a href="#">h3 Headline link modul<a/></h3>
<div class="multiparty-banner__more">
<p>We carefully plan and manage production
processes from an active ingredient to a
finished product.</p>
<a href="#" class="multiparty-banner__cta button button--cta"><span>More 2</span></a>
</div>
</div>
<div class="multiparty-banner__main__col">
<div class="multiparty-banner__overlay"></div>
<div class="border-fix border-fix--bottom"></div>
<div class="border-fix border-fix--top"></div>
<h3><a href="#">h3 Headline link modul<a/></h3>
<div class="multiparty-banner__more">
<p>We carefully plan and manage production
processes from an active ingredient to a
finished product.</p>
<a href="#" class="multiparty-banner__cta button button--cta"><span>More 2</span></a>
</div>
</div>
<div class="multiparty-banner__main__col">
<div class="multiparty-banner__overlay"></div>
<div class="border-fix border-fix--bottom"></div>
<div class="border-fix border-fix--top"></div>
<h3><a href="#">h3 Headline link modul<a/></h3>
<div class="multiparty-banner__more">
<p>We carefully plan and manage production
processes from an active ingredient to a
finished product.</p>
<a href="#" class="multiparty-banner__cta button button--cta"><span>More 2</span></a>
</div>
</div>
<div class="multiparty-banner__main__col">
<div class="multiparty-banner__overlay"></div>
<div class="border-fix border-fix--bottom"></div>
<div class="border-fix border-fix--top"></div>
<h3><a href="#">h3 Headline link modul<a/></h3>
<div class="multiparty-banner__more">
<p>We carefully plan and manage production
processes from an active ingredient to a
finished product.</p>
<a href="#" class="multiparty-banner__cta button button--cta"><span>More 2</span></a>
</div>
</div>
...
</div>
</section>