examples/components/card.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Theming - Semantic</title>
<!--- Site CSS -->
<link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
<link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
<link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
<!--- Component CSS -->
<link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">
<link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
<link rel="stylesheet" type="text/css" href="../../dist/components/card.css">
<link rel="stylesheet" type="text/css" href="../../dist/components/label.css">
<link rel="stylesheet" type="text/css" href="../../dist/components/image.css">
<link rel="stylesheet" type="text/css" href="../../dist/components/reveal.css">
<link rel="stylesheet" type="text/css" href="../../dist/components/dimmer.css">
<link rel="stylesheet" type="text/css" href="../../dist/components/rating.css">
<link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">
<link rel="stylesheet" type="text/css" href="../../dist/components/popup.css">
<!--- Component JS -->
<script src="../assets/library/jquery.min.js"></script>
<script src="../assets/library/iframe-content.js"></script>
<script type="text/javascript" src="../../dist/components/popup.js"></script>
<script type="text/javascript" src="../../dist/components/dimmer.js"></script>
<script type="text/javascript" src="../../dist/components/rating.js"></script>
<script type="text/javascript" src="../../dist/components/transition.js"></script>
<!--- Show Names -->
<script src="../assets/show-examples.js"></script>
<!--- Example CSS -->
<style>
body {
padding: 1em;
}
</style>
<!--- Example Javascript -->
<script>
$(document)
.ready(function() {
$('.special.card .image').dimmer({
on: 'hover'
});
$('.star.rating')
.rating()
;
$('.card .dimmer')
.dimmer({
on: 'hover'
})
;
})
;
</script>
</head>
<body>
<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="../assets/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="../assets/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="../assets/images/avatar/nan.jpg">
</div>
<div class="hidden content">
<img class="ui fluid image" src="../assets/images/avatar/tom.jpg">
</div>
</div>
<div class="content">
<img src="../assets/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="../assets/images/avatar/tom.jpg">
</div>
<div class="hidden content">
<img class="ui fluid image" src="../assets/images/avatar/nan.jpg">
</div>
</div>
<div class="content">
<img src="../assets/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="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
</div>
</div>
<div class="ui card">
<div class="content">
<div class="header">
<img src="../assets/images/wireframe/square-image.png" class="ui avatar right spaced image">
Abbreviated Header
</div>
<div class="description">
<img src="../assets/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="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
</div>
</div>
<div class="extra content">
<div class="right floated author">
<img src="../assets/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="../assets/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="../assets/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="../assets/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="../assets/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="../assets/images/wireframe/image.png">
</div>
<div class="extra center aligned">
<div data-rating="4" class="ui star rating"></div>
</div>
</div>
</div>
</body>
</html>