Tim Schumacher
parent
3f1e728781
commit
4385f1acbc
425 changed files with 59924 additions and 37200 deletions
313
web/semantic/examples/components/card.html
Normal file
313
web/semantic/examples/components/card.html
Normal file
|
|
@ -0,0 +1,313 @@
|
|||
<!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>
|
||||
Reference in a new issue