Logo list

Overview

The logo list component displays a list of logos. These are usually logos of organisations that use the MYOB product or service featured on the page. There is a minimum of 3 and a maximum of 5 images required to display the list. Each logo list consists of an optional heading and call-to-action.

Examples

Static variation

Example
External Link 
<ul class="logo-list mb-1">
  <li class="logo-list__item mb-1 mb-2--lg">
    <a href="#" target="__blank"><img class="logo-list__logo" src="http://placehold.it/175x40.jpg" data-interchange="[http://placehold.it/175x40.png]" alt="" data-myob-image></a>
  </li>
  <li class="logo-list__item mb-1 mb-2--lg">
    <a href="#" target="__blank"><img class="logo-list__logo" src="http://placehold.it/155x50.jpg" data-interchange="[http://placehold.it/155x50.png]" alt="" data-myob-image></a>
  </li>
  <li class="logo-list__item mb-1 mb-2--lg">
    <a href="#" target="__blank"><img  class="logo-list__logo" src="http://placehold.it/200x30.jpg" data-interchange="[http://placehold.it/200x30.png]" alt="" data-myob-image></a>
  </li>
  <li class="logo-list__item mb-1 mb-2--lg">
    <a href="#" target="__blank"><img  class="logo-list__logo" src="http://placehold.it/130x40.jpg" data-interchange="[http://placehold.it/130x40.png]" alt="" data-myob-image></a>
  </li>
  <li class="logo-list__item mb-1 mb-2--lg">
    <a href="#" target="__blank"><img  class="logo-list__logo" src="http://placehold.it/100x25.jpg" data-interchange="[http://placehold.it/100x25.png]"alt="" data-myob-image></a>
  </li>
</ul>

Animated variation

Example
External Link

Usage guidelines

Dos Donts
do iconDo try to use logo images that are suitably sized, so as to avoid alignment issues.
do-not iconDon't exceed a maximum file size of 20Kb.
do-not iconDon't use this component to display anything other than brand logo images.
do-not iconDon't place within a container smaller than the full page width.

Implementation guidelines

We're so sorry, there are currently no implementation guidelines for this component 😥

If you feel you can help out your fellow designers by creating usage guidelines for this component, please reach out to #cr-marquee on Slack.