Card Grid

Card Grids are...

Card Grid Defaults

Card Grid Compact

HTML 
<ul class="card-grid card-grid--compact">
  <li class="card-grid__item">
    <article class="card " data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet</a>
          </h5>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
  <li class="card-grid__item">
    <article class="card " data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
          </h5>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
  <li class="card-grid__item">
    <article class="card " data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem Ipsum</a>
          </h5>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
  <li class="card-grid__item">
    <article class="card " data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet</a>
          </h5>
          <div>
            This is the card content. It can contain around 2-3 sentences.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
  <li class="card-grid__item">
    <article class="card " data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
          </h5>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
</ul>

Horizontal Card Grid

Horizontal One Column

HTML 
<ul class="card-grid card-grid--one-column">
  <li class="card-grid__item">
    <article class="card card--w-image card--image-fit card--horizontal" data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet</a>
          </h5>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
  <li class="card-grid__item">
    <article class="card card--w-image card--image-fit card--horizontal" data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
          </h5>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
  <li class="card-grid__item">
    <article class="card card--w-image card--image-fit card--horizontal" data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem Ipsum</a>
          </h5>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
  <li class="card-grid__item">
    <article class="card card--w-image card--image-fit card--horizontal" data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet</a>
          </h5>
          <div>
            This is the card content. It can contain around 2-3 sentences.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
  <li class="card-grid__item">
    <article class="card card--w-image card--image-fit card--horizontal" data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
          </h5>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
</ul>

List Grid with Switcher

HTML 
<ul class="card-grid list-grid__rows">
  <li class="card-grid__item">
    <article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet</a>
          </h5>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
  <li class="card-grid__item">
    <article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
          </h5>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
  <li class="card-grid__item">
    <article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem Ipsum</a>
          </h5>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
  <li class="card-grid__item">
    <article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet</a>
          </h5>
          <div>
            This is the card content. It can contain around 2-3 sentences.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
  <li class="card-grid__item">
    <article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
          </h5>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
</ul>

Constrained Container (1000px)

HTML 
<ul class="card-grid ">
  <li class="card-grid__item">
    <article class="card " data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet</a>
          </h5>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
  <li class="card-grid__item">
    <article class="card " data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
          </h5>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
  <li class="card-grid__item">
    <article class="card " data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem Ipsum</a>
          </h5>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
  <li class="card-grid__item">
    <article class="card " data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet</a>
          </h5>
          <div>
            This is the card content. It can contain around 2-3 sentences.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
  <li class="card-grid__item">
    <article class="card " data-ulu-proxy-click>
      <div class="card__body">
        <div class="card__main">
          <h5 class="card__title">
            <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
          </h5>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
        <div class="card__aside">This is the aside content</div>
      </div>
      <div class="card__image ">
        <img src="/assets/placeholder/image-1.jpg" />
      </div>
      <div class="card__footer">
        <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
      </div>
    </article>
  </li>
</ul>