Logo showcase

For displaying partner logos etc

Logo showcase

ready 
<div class="ds-block">
    <h2 style="text-align: center;">Where our graduates are thriving</h2>
    <p style="text-align: center;">Over 30 years, we've placed 20,00 business and commerce graduates in high-growth, high-potential careers in the global business world</p>
</div>

<div class="ds-block">

    <ul class="ds-logo-showcase">
        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-1.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-2.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-3.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-4.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-5.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-6.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-7.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-8.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-1.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-2.svg" alt="">
        </li>

    </ul>

</div>

Logo showcase - linked

ready 
<div class="ds-block">
    <h2 style="text-align: center;">Sponsors</h2>
</div>

<div class="ds-block">

    <ul class="ds-logo-showcase">
        <li class="ds-logo-showcase__logo">
            <a href="https://example.org" target="_blank"><img src="assets/logo-1.svg" alt=""></a>
        </li>

        <li class="ds-logo-showcase__logo">
            <a href="https://example.org" target="_blank"><img src="assets/logo-2.svg" alt=""></a>
        </li>

        <li class="ds-logo-showcase__logo">
            <a href="https://example.org" target="_blank"><img src="assets/logo-3.svg" alt=""></a>
        </li>

        <li class="ds-logo-showcase__logo">
            <a href="https://example.org" target="_blank"><img src="assets/logo-4.svg" alt=""></a>
        </li>

        <li class="ds-logo-showcase__logo">
            <a href="https://example.org" target="_blank"><img src="assets/logo-5.svg" alt=""></a>
        </li>

        <li class="ds-logo-showcase__logo">
            <a href="https://example.org" target="_blank"><img src="assets/logo-6.svg" alt=""></a>
        </li>

        <li class="ds-logo-showcase__logo">
            <a href="https://example.org" target="_blank"><img src="assets/logo-7.svg" alt=""></a>
        </li>

        <li class="ds-logo-showcase__logo">
            <a href="https://example.org" target="_blank"><img src="assets/logo-8.svg" alt=""></a>
        </li>

        <li class="ds-logo-showcase__logo">
            <a href="https://example.org" target="_blank"><img src="assets/logo-1.svg" alt=""></a>
        </li>

        <li class="ds-logo-showcase__logo">
            <a href="https://example.org" target="_blank"><img src="assets/logo-2.svg" alt=""></a>
        </li>

    </ul>

</div>

Modifiers

By default the maximum number of logos in a row is 6.

Use the modifiers below to limit row to 5 or 4 max as desired based on total number of logos.

Logo showcase 5 cols

ready

Use modifier class `ds-logo-showcase--max-5-cols` to limit the number of logos per row to 5 max.

<div class="ds-block">

    <ul class="ds-logo-showcase  ds-logo-showcase--max-5-cols">
        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-1.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-2.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-3.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-4.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-5.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-6.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-7.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-8.svg" alt="">
        </li>
    </ul>

</div>

Logo showcase 4 cols

ready

Use modifier class `ds-logo-showcase--max-4-cols` to limit the number of logos per row to 4 max.

<div class="ds-block">

    <ul class="ds-logo-showcase  ds-logo-showcase--max-4-cols">
        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-1.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-2.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-3.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-4.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-5.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-6.svg" alt="">
        </li>

        <li class="ds-logo-showcase__logo">
            <img src="assets/logo-7.svg" alt="">
        </li>

    </ul>

</div>