Card Group - Wojoscripts

Cards

A group of cards.

Friends of Veronika

Elliot requested permission to view your contact details

Approve

Decline

New Member

Jenny wants to add you to the group best friends

Approve

Decline

<div class="wojo cards">
  <div class="card">
    <div class="content">
      <img class="right floated mini wojo image" src="images/elliot.png">
      <div class="header"> Elliot Fu </div>
      <div class="meta"> Friends of Veronika </div>
      <div class="description"> Elliot requested permission to view your contact details </div>
    </div>
    <div class="extra content">
      <div class="wojo fluid buttons">
        <div class="wojo primary button">Approve</div>
        <div class="wojo secondary button">Decline</div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="content">
      <img class="right floated mini wojo image" src="/images/jullie.png">
      <div class="header"> Jenny Hess </div>
      <div class="meta"> New Member </div>
      <div class="description"> Jenny wants to add you to the group <b>best friends</b>
      </div>
    </div>
    <div class="extra content">
      <div class="wojo fluid buttons">
        <div class="wojo primary button">Approve</div>
        <div class="wojo secondary button">Decline</div>
      </div>
    </div>
  </div>
</div>

Centered Card

A card can center itself inside its container.

<div class="wojo centered card">
  <div class="image">
    <img src="/images/elyse.png">
  </div>
  <div class="content">
    <a class="header">Elyse</a>
  </div>
</div>

Buttons

A card can contain buttons

Elliot Fu is a film-maker from New York.

Add Friend

Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.

Add Friend

  <div class="wojo cards">
    <div class="card">
      <div class="content">
        <div class="header">Elliot Fu</div>
        <div class="description"> Elliot Fu is a film-maker. </div>
      </div>
      <div class="wojo bottom attached button">
        <i class="plus  icon"></i> Add Friend </div>
    </div>
    <div class="card">
      <div class="content">
        <div class="header">Veronika Ossi</div>
        <div class="description"> Veronika Ossi is a set designer living </div>
      </div>
      <div class="wojo bottom attached button">
        <i class="plus icon"></i> Add Friend </div>
    </div>
  </div>