Cards

Updated 4 months 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?