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

  • Card 1 Title
    This is the card content. It can contain around 2-3 sentences.
    This is the aside content
    Footer
  • Card 2 Title
    This is the card content. It can contain around 2-3 sentences.
    This is the aside content
    Footer
  • Card 3 Title
    This is the card content. It can contain around 2-3 sentences.
    This is the aside content
    Footer