githubmirror/Semantic-UI

examples/components/card.html
313 строк8 KB
jlukic
Add fix for iframes in chrome
30 май 2015, 00:35
30 май 2015, 00:35d5e0225
<!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>