UNPKG

fomantic-ui/examples/components/card.html

Version:

1<!DOCTYPE html>
2<html>
3<head>
4
<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>
9
<!--- 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">
14
<!--- 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">
26
<!--- 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>
34
<!--- Show Names -->
<script src="../assets/show-examples.js"></script>
37
<!--- Example CSS -->
<style>
  body {
    padding: 1em;
  }
</style>
44
<!--- Example Javascript -->
<script>
$(document)
  .ready(function() {
    $('.special.card .image').dimmer({
      on: 'hover'
    });
    $('.star.rating')
      .rating()
    ;
    $('.card .dimmer')
      .dimmer({
        on: 'hover'
      })
    ;
  })
;
</script>
63</head>
64
65<body>
66
67<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>
142</div>
143<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>
215</div>
216
217
218<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>
275</div>
276
277<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>
310</div>
311
312</body>
313</html>
\No newline at end of file

1	`<!DOCTYPE html>`
2	`<html>`
3	`<head>`
4
5	`<meta charset="utf-8" />`
6	`<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />`
7	`<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">`
8	`<title>Theming - Semantic</title>`
9
10	`<!--- Site CSS -->`
11	`<link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">`
12	`<link rel="stylesheet" type="text/css" href="../../dist/components/site.css">`
13	`<link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">`
14
15	`<!--- Component CSS -->`
16	`<link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">`
17	`<link rel="stylesheet" type="text/css" href="../../dist/components/button.css">`
18	`<link rel="stylesheet" type="text/css" href="../../dist/components/card.css">`
19	`<link rel="stylesheet" type="text/css" href="../../dist/components/label.css">`
20	`<link rel="stylesheet" type="text/css" href="../../dist/components/image.css">`
21	`<link rel="stylesheet" type="text/css" href="../../dist/components/reveal.css">`
22	`<link rel="stylesheet" type="text/css" href="../../dist/components/dimmer.css">`
23	`<link rel="stylesheet" type="text/css" href="../../dist/components/rating.css">`
24	`<link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">`
25	`<link rel="stylesheet" type="text/css" href="../../dist/components/popup.css">`
26
27	`<!--- Component JS -->`
28	`<script src="../assets/library/jquery.min.js"></script>`
29	`<script src="../assets/library/iframe-content.js"></script>`
30	`<script type="text/javascript" src="../../dist/components/popup.js"></script>`
31	`<script type="text/javascript" src="../../dist/components/dimmer.js"></script>`
32	`<script type="text/javascript" src="../../dist/components/rating.js"></script>`
33	`<script type="text/javascript" src="../../dist/components/transition.js"></script>`
34
35	`<!--- Show Names -->`
36	`<script src="../assets/show-examples.js"></script>`
37
38	`<!--- Example CSS -->`
39	`<style>`
40	`body {`
41	`padding: 1em;`
42	`}`
43	`</style>`
44
45	`<!--- Example Javascript -->`
46	`<script>`
47	`$(document)`
48	`.ready(function() {`
49	`$('.special.card .image').dimmer({`
50	`on: 'hover'`
51	`});`
52	`$('.star.rating')`
53	`.rating()`
54	`;`
55	`$('.card .dimmer')`
56	`.dimmer({`
57	`on: 'hover'`
58	`})`
59	`;`
60	`})`
61	`;`
62	`</script>`
63	`</head>`
64
65	`<body>`
66
67	`<div class="ui four cards">`
68	`<div class="ui card">`
69	`<div class="image">`
70	`<div class="ui blurring inverted dimmer">`
71	`<div class="content">`
72	`<div class="center">`
73	`<div class="ui teal button">Add Friend</div>`
74	`</div>`
75	`</div>`
76	`</div>`
77	`<img src="../assets/images/wireframe/image.png">`
78	`</div>`
79	`<div class="content">`
80	`<div class="header">Title</div>`
81	`<div class="meta">`
82	`<a class="group">Meta</a>`
83	`</div>`
84	`<div class="description">One or two sentence description that may go to several lines</div>`
85	`</div>`
86	`<div class="extra content">`
87	`<a class="right floated created">Arbitrary</a>`
88	`<a class="friends">`
89	`Arbitrary</a>`
90	`</div>`
91	`</div>`
92	`<div class="ui card">`
93	`<div class="blurring dimmable image">`
94	`<div class="ui dimmer">`
95	`<div class="content">`
96	`<div class="center">`
97	`<div class="ui inverted button">Call to Action</div>`
98	`</div>`
99	`</div>`
100	`</div>`
101	`<img src="../assets/images/wireframe/image.png">`
102	`</div>`
103	`<div class="content">`
104	`<a class="header">Name</a>`
105	`<div class="meta">`
106	`<span class="date">Date</span>`
107	`</div>`
108	`</div>`
109	`<div class="extra content">`
110	`<a>`
111	`<i class="users icon"></i>`
112	`Users`
113	`</a>`
114	`</div>`
115	`</div>`
116	`<div class="ui card">`
117	`<div class="ui slide right reveal image">`
118	`<div class="visible content">`
119	`<img class="ui fluid image" src="../assets/images/avatar/nan.jpg">`
120	`</div>`
121	`<div class="hidden content">`
122	`<img class="ui fluid image" src="../assets/images/avatar/tom.jpg">`
123	`</div>`
124	`</div>`
125	`<div class="content">`
126	`<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">`
127	`</div>`
128	`</div>`
129	`<div class="ui card">`
130	`<div class="ui move reveal image">`
131	`<div class="visible content">`
132	`<img class="ui fluid image" src="../assets/images/avatar/tom.jpg">`
133	`</div>`
134	`<div class="hidden content">`
135	`<img class="ui fluid image" src="../assets/images/avatar/nan.jpg">`
136	`</div>`
137	`</div>`
138	`<div class="content">`
139	`<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">`
140	`</div>`
141	`</div>`
142	`</div>`
143	`<div class="ui four cards">`
144	`<div class="ui card">`
145	`<div class="extra content">`
146	`<span class="left floated like">`
147	`<i class="like icon"></i>`
148	`Like`
149	`</span>`
150	`<span class="right floated star">`
151	`<i class="star icon"></i>`
152	`Favorite`
153	`</span>`
154	`</div>`
155	`<div class="content">`
156	`<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">`
157	`</div>`
158	`</div>`
159	`<div class="ui card">`
160	`<div class="content">`
161	`<div class="header">`
162	`<img src="../assets/images/wireframe/square-image.png" class="ui avatar right spaced image">`
163	`Abbreviated Header`
164	`</div>`
165	`<div class="description">`
166	`<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">`
167	`</div>`
168	`</div>`
169	`<div class="ui two bottom attached buttons">`
170	`<div class="ui button">`
171	`Action 1`
172	`</div>`
173	`<div class="ui button">`
174	`Action 2`
175	`</div>`
176	`</div>`
177	`</div>`
178	`<a href="#" class="ui card">`
179	`<div class="content">`
180	`<div class="header">Cute Dog</div>`
181	`<div class="meta">`
182	`<span class="category">Animals</span>`
183	`</div>`
184	`<div class="description">`
185	`<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">`
186	`</div>`
187	`</div>`
188	`<div class="extra content">`
189	`<div class="right floated author">`
190	`<img src="../assets/images/wireframe/square-image.png" class="ui avatar image"> Username`
191	`</div>`
192	`</div>`
193	`</a>`
194	`<div class="ui card">`
195	`<div class="ui two top attached basic buttons">`
196	`<div class="ui button">`
197	`Action 1`
198	`</div>`
199	`<div class="ui button">`
200	`Action 2`
201	`</div>`
202	`</div>`
203	`<div class="content">`
204	`<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">`
205	`</div>`
206	`<div class="ui two bottom attached basic buttons">`
207	`<div class="ui button">`
208	`Action 3`
209	`</div>`
210	`<div class="ui button">`
211	`Action 4`
212	`</div>`
213	`</div>`
214	`</div>`
215	`</div>`
216
217
218	`<div class="ui four cards">`
219	`<div class="card">`
220	`<div class="content">`
221	`Content 1`
222	`</div>`
223	`<div class="content">`
224	`Content 2`
225	`</div>`
226	`<div class="content">`
227	`Content 3`
228	`</div>`
229	`<div class="extra content">`
230	`Extra Content`
231	`</div>`
232	`</div>`
233	`<div class="card">`
234	`<div class="content">`
235	`Content 1`
236	`</div>`
237	`<div class="content">`
238	`Content 2`
239	`</div>`
240	`<div class="content">`
241	`Content 3`
242	`</div>`
243	`<div class="extra content">`
244	`Extra Content`
245	`</div>`
246	`</div>`
247	`<div class="card">`
248	`<div class="content">`
249	`Content 1`
250	`</div>`
251	`<div class="content">`
252	`Content 2`
253	`</div>`
254	`<div class="content">`
255	`Content 3`
256	`</div>`
257	`<div class="extra content">`
258	`Extra Content`
259	`</div>`
260	`</div>`
261	`<div class="card">`
262	`<div class="content">`
263	`Content 1`
264	`</div>`
265	`<div class="content">`
266	`Content 2`
267	`</div>`
268	`<div class="content">`
269	`Content 3`
270	`</div>`
271	`<div class="extra content">`
272	`Extra Content`
273	`</div>`
274	`</div>`
275	`</div>`
276
277	`<div class="ui four cards">`
278	`<div class="card">`
279	`<div class="image">`
280	`<img src="../assets/images/wireframe/image.png">`
281	`</div>`
282	`<div class="extra center aligned">`
283	`<div data-rating="4" class="ui star rating"></div>`
284	`</div>`
285	`</div>`
286	`<div class="card">`
287	`<div class="image">`
288	`<img src="../assets/images/wireframe/image.png">`
289	`</div>`
290	`<div class="extra center aligned">`
291	`<div data-rating="2" class="ui star rating"></div>`
292	`</div>`
293	`</div>`
294	`<div class="card">`
295	`<div class="image">`
296	`<img src="../assets/images/wireframe/image.png">`
297	`</div>`
298	`<div class="extra center aligned">`
299	`<div data-rating="3" class="ui star rating"></div>`
300	`</div>`
301	`</div>`
302	`<div class="card">`
303	`<div class="image">`
304	`<img src="../assets/images/wireframe/image.png">`
305	`</div>`
306	`<div class="extra center aligned">`
307	`<div data-rating="4" class="ui star rating"></div>`
308	`</div>`
309	`</div>`
310	`</div>`
311
312	`</body>`
313	`</html>`
\	No newline at end of file