legendary-doc-site/apps/content/lib/content/templates/page/theming/_card.html.eex

<div class="ui four cards">
  <div class="ui card">
    <div class="image">
      <div class="ui blurring inverted dimmer">
        <div class="content">
          <div class="center">
            <div class="ui teal button">Add Friend</div>
          </div>
        </div>
      </div>
      <img src="/images/wireframe/image.png">
    </div>
    <div class="content">
      <div class="header">Title</div>
      <div class="meta">
        <a class="group">Meta</a>
      </div>
      <div class="description">One or two sentence description that may go to several lines</div>
    </div>
    <div class="extra content">
      <a class="right floated created">Arbitrary</a>
      <a class="friends">
        Arbitrary</a>
    </div>
  </div>
  <div class="ui card">
    <div class="blurring dimmable image">
      <div class="ui dimmer">
        <div class="content">
          <div class="center">
            <div class="ui inverted button">Call to Action</div>
          </div>
        </div>
      </div>
      <img src="/images/wireframe/image.png">
    </div>
    <div class="content">
      <a class="header">Name</a>
      <div class="meta">
        <span class="date">Date</span>
      </div>
    </div>
    <div class="extra content">
      <a>
        <i class="users icon"></i>
        Users
      </a>
    </div>
  </div>
  <div class="ui card">
    <div class="ui slide right reveal image">
      <div class="visible content">
        <img class="ui fluid image" src="/images/avatar/nan.jpg">
      </div>
      <div class="hidden content">
        <img class="ui fluid image" src="/images/avatar/tom.jpg">
      </div>
    </div>
    <div class="content">
      <img src="/images/wireframe/paragraph.png" class="ui wireframe image">
    </div>
  </div>
  <div class="ui card">
    <div class="ui move reveal image">
      <div class="visible content">
        <img class="ui fluid image" src="/images/avatar/tom.jpg">
      </div>
      <div class="hidden content">
        <img class="ui fluid image" src="/images/avatar/nan.jpg">
      </div>
    </div>
    <div class="content">
      <img src="/images/wireframe/paragraph.png" class="ui wireframe image">
    </div>
  </div>
</div>
<div class="ui four cards">
  <div class="ui card">
    <div class="extra content">
      <span class="left floated like">
        <i class="like icon"></i>
        Like
      </span>
      <span class="right floated star">
        <i class="star icon"></i>
        Favorite
      </span>
    </div>
    <div class="content">
      <img src="/images/wireframe/paragraph.png" class="ui wireframe image">
    </div>
  </div>
  <div class="ui card">
    <div class="content">
      <div class="header">
        <img src="/images/wireframe/square-image.png" class="ui avatar right spaced image">
        Abbreviated Header
      </div>
      <div class="description">
        <img src="/images/wireframe/paragraph.png" class="ui wireframe image">
      </div>
    </div>
    <div class="ui two bottom attached buttons">
      <div class="ui button">
        Action 1
      </div>
      <div class="ui button">
        Action 2
      </div>
    </div>
  </div>
  <a href="#" class="ui card">
    <div class="content">
      <div class="header">Cute Dog</div>
      <div class="meta">
        <span class="category">Animals</span>
      </div>
      <div class="description">
        <img src="/images/wireframe/paragraph.png" class="ui wireframe image">
      </div>
    </div>
    <div class="extra content">
      <div class="right floated author">
        <img src="/images/wireframe/square-image.png" class="ui avatar image"> Username
      </div>
    </div>
  </a>
  <div class="ui card">
    <div class="ui two top attached basic buttons">
      <div class="ui button">
        Action 1
      </div>
      <div class="ui button">
        Action 2
      </div>
    </div>
    <div class="content">
      <img src="/images/wireframe/paragraph.png" class="ui wireframe image">
    </div>
    <div class="ui two bottom attached basic buttons">
      <div class="ui button">
        Action 3
      </div>
      <div class="ui button">
        Action 4
      </div>
    </div>
  </div>
</div>


<div class="ui four cards">
  <div class="card">
    <div class="content">
      Content 1
    </div>
    <div class="content">
      Content 2
    </div>
    <div class="content">
      Content 3
    </div>
    <div class="extra content">
      Extra Content
    </div>
  </div>
  <div class="card">
    <div class="content">
      Content 1
    </div>
    <div class="content">
      Content 2
    </div>
    <div class="content">
      Content 3
    </div>
    <div class="extra content">
      Extra Content
    </div>
  </div>
  <div class="card">
    <div class="content">
      Content 1
    </div>
    <div class="content">
      Content 2
    </div>
    <div class="content">
      Content 3
    </div>
    <div class="extra content">
      Extra Content
    </div>
  </div>
  <div class="card">
    <div class="content">
      Content 1
    </div>
    <div class="content">
      Content 2
    </div>
    <div class="content">
      Content 3
    </div>
    <div class="extra content">
      Extra Content
    </div>
  </div>
</div>

<div class="ui four cards">
  <div class="card">
    <div class="image">
      <img src="/images/wireframe/image.png">
    </div>
    <div class="extra center aligned">
      <div data-rating="4" class="ui star rating"></div>
    </div>
  </div>
  <div class="card">
    <div class="image">
      <img src="/images/wireframe/image.png">
    </div>
    <div class="extra center aligned">
      <div data-rating="2" class="ui star rating"></div>
    </div>
  </div>
  <div class="card">
    <div class="image">
      <img src="/images/wireframe/image.png">
    </div>
    <div class="extra center aligned">
      <div data-rating="3" class="ui star rating"></div>
    </div>
  </div>
  <div class="card">
    <div class="image">
      <img src="/images/wireframe/image.png">
    </div>
    <div class="extra center aligned">
      <div data-rating="4" class="ui star rating"></div>
    </div>
  </div>
</div>