Cards

Updated 4 years ago by Wizzi

Card

A single card.

<div class="ui card">
  <div class="image">
    <img src="https://via.placeholder.com/400x400">
  </div>
  <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 href="#">
      <i class="user icon"></i>
      22 Friends
    </a>
  </div>
</div>

Cards

A group of cards.

<div class="ui cards">
  <div class="card">
    <div class="content">
      <img class="right floated mini ui image" src="https://via.placeholder.com/200x200">
      <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="ui two buttons">
        <div class="ui basic green button">Approve</div>
        <div class="ui basic red button">Decline</div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="content">
      <img class="right floated mini ui image" src="https://via.placeholder.com/200x200">
      <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="ui two buttons">
        <div class="ui basic green button">Approve</div>
        <div class="ui basic red button">Decline</div>
      </div>
    </div>
  </div>
</div>

Fluid Card

A fluid card takes up the width of its container

<div class="ui three column grid">
  <div class="column">
    <div class="ui fluid card">
      <div class="image">
        <img src="https://via.placeholder.com/400x400">
      </div>
      <div class="content">
        <a class="header" href="#">Daniel Louise</a>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui fluid card">
      <div class="image">
        <img src="https://via.placeholder.com/400x400">
      </div>
      <div class="content">
        <a class="header" href="#">Helen Troy</a>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui fluid card">
      <div class="image">
        <img src="https://via.placeholder.com/400x400pg">
      </div>
      <div class="content">
        <a class="header" href="#">Elliot Fu</a>
      </div>
    </div>
  </div>
</div>

Centered Card

A card can center itself inside its container

<div class="ui centered card">
  <div class="image">
    <img src="https://via.placeholder.com/400x400">
  </div>
  <div class="content">
    <a class="header" href="#">Elyse</a>
  </div>
</div>

Horizontal Card

A card can display horizontally

<div class="ui horizontal cards">
  <div class="card">
    <div class="image">
      <img src="https://via.placeholder.com/400x400">
    </div>
    <div class="content">
      <div class="header">Matt Giampietro</div>
      <div class="meta">
        <a>Friends</a>
      </div>
      <div class="description">
        Matthew is an interior designer living in New York.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="image">
      <img src="https://via.placeholder.com/400x400">
    </div>
    <div class="content">
      <div class="header">Molly</div>
      <div class="meta">
        <span class="date">Coworker</span>
      </div>
      <div class="description">
        Molly is a personal assistant living in Paris.
      </div>
    </div>
  </div>
</div>

Column Count

A group of cards can set how many cards should exist in a row

<div class="ui four cards">
  <div class="card">
    <div class="image">
      <img src="https://via.placeholder.com/400x400">
    </div>
    <div class="extra">
      Rating:
      <div class="ui yellow rating" data-rating="4"></div>
    </div>
  </div>
  <div class="card">
    <div class="image">
      <img src="https://via.placeholder.com/400x400">
    </div>
    <div class="extra">
      Rating:
      <div class="ui yellow rating" data-rating="2"></div>
    </div>
  </div>
  <div class="card">
    <div class="image">
      <img src="https://via.placeholder.com/400x400">
    </div>
    <div class="extra">
      Rating:
      <div class="ui yellow rating" data-rating="3"></div>
    </div>
  </div>
  <div class="card">
    <div class="image">
      <img src="https://via.placeholder.com/400x400">
    </div>
    <div class="extra">
      Rating:
      <div class="ui yellow rating" data-rating="3"></div>
    </div>
  </div>
</div>

How did we do?