Card v2

Content Cards

Examples

<div class="card v2">
  <div class="card-image">
    <img src="/img/avatar/square/avatar-5.png">
  </div>
  <div class="card-content">
    <a class="h3">qm-b</a>
    <div class="card-meta">
      <span class="date">Member since 2011</span>
    </div>
    <div class="description">
      QM-B is a programmer from Frankfurt/Main.
    </div>
  </div>
  <div class="extra card-content">
    <a>
      <i class="acms-icon acms-icon-users"></i>
      2182 Friends
    </a>
  </div>
</div>
qm-b
Member since 2011
QM-B is a programmer from Frankfurt/Main.
2182 Friends 
<div class="card v2">
  <a class="card-image" href="#">
    <img src="/img/avatar/square/avatar-10.png">
  </a>
  <div class="card-content">
    <a class="h3" href="#">Roger Rabbit</a>
    <div class="card-meta">
      <a>Last online 2 days earlier</a>
    </div>
  </div>
</div>
Roger Rabbit
Last online 2 days earlier
14h
Karl
237 likes 326 comments
Otto Walkes
New Members
Otto would like to include you in persons.

Grouping

14h
Karl
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet

Collecting

.cards > .card

<div class="four cards">
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    ...
</div>

Note

The grouping of the cards takes place on the indication of the amount of cards per line. Breaking the cards into the next line on mobile and tablet devices, can be done with the additional selector responsive.

14h
Karl
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet

.feed-collection

<div class="feed-collection v1 two-small-up-only three-medium-up-only">
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    ...
</div>
14h
Karl
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet
Lorem Ipsum dolor sit amet
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet
Lorem Ipsum dolor sit amet
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet
Lorem Ipsum dolor sit amet
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet
Lorem Ipsum dolor sit amet
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet
14h
Karl
Lorem Ipsum dolor sit amet
Lorem Ipsum dolor sit amet