Card Grid

Card Grids are...

Card Grid Defaults

<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="">Card 1</a>
          </h5>
          <div>
            This is a card with an upper image using a containing div with the "card__image" class.
          </div>
        </div>
      </div>
      <div class="card__image">
        <img src="/frontend/assets/placeholder/image-1.jpg">
      </div>
      <div class="card__footer">
        My Card Footer
      </div>
    </article>
  </li>
  ... 
</ul>
<ul class="card-grid">
  <li class="card-grid__item">
    // First Card Content
  </li>
  <li class="card-grid__item">
    // Second Card Content
  </li>
</ul>

Card Grid Compact

Horizontal Card Grid

List Grid with Switcher

  • Lorem Ipsum
    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.
    This is the aside content
    Footer