You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<!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>
|
