Semantic App Layout cards

HTML

<script src="//cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css">
<div class="ui dimmable dimmed">
  <div class="ui card">
    <div class="content">
      <a class="header">Kristy</a>
      <div class="meta">
        <span class="date">Joined in 2013</span>
      </div>
      <div class="description">
        Kristy is an art director living in New York.
      </div>
    </div>
    <div class="extra content">
      <a>
      <i class="user icon"></i>
      22 Friends
    </a>
    </div>
  </div>
</div>

CSS

body {
  margin: 5px;
}