Logo list group

Overview

This component is to be deprecated

Examples

Single variation

Example
External Link

Heading

Call to Action 
<div class="logo-list-group logo-list-group--1">
  <div class="mb-2 mb-3--lg">
    <h3>Heading</h3>
  </div>
  <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" alt=""></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" alt=""></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" alt=""></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" alt=""></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" alt=""></a>
    </li>
  </ul>
  <a href="" class="btn btn--bordered-secondary">Call to Action</a>
</div>

Double variation

Double variation creates a 50% split with a subtle border line separating the two. Stacks on mobile.

Example
External Link

Connect with your existing business software

Call to Action

Save half a day every month by linking a bank account

Call to Action 
<div class="container container--bg-storm-6 container--padding-lg" data-equalizer="box-heading" data-equalize-on="xlarge">
  <div class="logo-list-group logo-list-group--2" data-equalizer="box-logo-list" data-equalize-on="xlarge">
    <div class="logo-list-group__col">
      <div class="mb-2 mb-3--lg">
        <h3 data-equalizer-watch="box-heading">Connect with your existing business software</h3>
      </div>
      <ul class="logo-list mb-1" data-equalizer-watch="box-logo-list">
        <li class="logo-list__item mb-1 mb-2--lg">
          <a href="#" target="__blank"><img class="logo-list__logo" src="http://placehold.it/100x40" alt=""></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" alt=""></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" alt=""></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/50x50" alt=""></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/100x30" alt=""></a>
        </li>
      </ul>
      <a href="" class="btn btn--bordered-secondary">Call to Action</a>
    </div>
    <div class="logo-list-group__col">
      <div class="mb-2 mb-3--lg">
        <h3 data-equalizer-watch="box-heading">Save half a day every month by linking a bank account</h3>
      </div>
      <ul class="logo-list mb-1" data-equalizer-watch="box-logo-list">
        <li class="logo-list__item mb-1 mb-2--lg">
          <a href="#" target="__blank"><img class="logo-list__logo" src="http://placehold.it/125x60" alt=""></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/100x30" alt=""></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/155x30" alt=""></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/200x50" alt=""></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/125x30" alt=""></a>
        </li>
      </ul>
      <a href="" class="btn btn--bordered-secondary">Call to Action</a>
    </div>
  </div>
</div>

Usage guidelines

We're so sorry, there are currently no usage 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.

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.