UNPKG

23.6 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="msapplication-tap-highlight" content="no">
8 <meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. ">
9 <title>Cards - Materialize</title>
10 <!-- Favicons-->
11 <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
12 <meta name="msapplication-TileColor" content="#FFFFFF">
13 <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
14 <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
15 <!-- Android 5 Chrome Color-->
16 <meta name="theme-color" content="#EE6E73">
17 <!-- CSS-->
18 <link href="css/prism.css" rel="stylesheet">
19 <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
20 <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
21 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
22 <script>
23 window.liveSettings = {
24 api_key: "a0b49b34b93844c38eaee15690d86413",
25 picker: "bottom-right",
26 detectlang: true,
27 dynamic: true,
28 autocollect: true
29 };
30 </script>
31 <script src="//cdn.transifex.com/live.js"></script>
32 </head>
33 <body>
34 <header>
35 <nav class="top-nav">
36 <div class="container">
37 <div class="nav-wrapper"><a class="page-title">Cards</a></div>
38 </div>
39 </nav>
40 <div class="container"><a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="mdi-navigation-menu"></i></a></div>
41 <ul id="nav-mobile" class="side-nav fixed">
42 <li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
43 <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
44 <li class="search">
45 <div class="search-wrapper card">
46 <input id="search"><i class="material-icons">search</i>
47 <div class="search-results"></div>
48 </div>
49 </li>
50 <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li>
51 <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
52 <li class="no-padding">
53 <ul class="collapsible collapsible-accordion">
54 <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
55 <div class="collapsible-body">
56 <ul>
57 <li><a href="color.html">Color</a></li>
58 <li><a href="grid.html">Grid</a></li>
59 <li><a href="helpers.html">Helpers</a></li>
60 <li><a href="media-css.html">Media</a></li>
61 <li><a href="sass.html">Sass</a></li>
62 <li><a href="shadow.html">Shadow</a></li>
63 <li><a href="table.html">Table</a></li>
64 <li><a href="typography.html">Typography</a></li>
65 </ul>
66 </div>
67 </li>
68 <li class="bold"><a class="collapsible-header active waves-effect waves-teal">Components</a>
69 <div class="collapsible-body">
70 <ul>
71 <li><a href="badges.html">Badges</a></li>
72 <li><a href="buttons.html">Buttons</a></li>
73 <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
74 <li class="active"><a href="cards.html">Cards</a></li>
75 <li><a href="chips.html">Chips</a></li>
76 <li><a href="collections.html">Collections</a></li>
77 <li><a href="footer.html">Footer</a></li>
78 <li><a href="forms.html">Forms</a></li>
79 <li><a href="icons.html">Icons</a></li>
80 <li><a href="navbar.html">Navbar</a></li>
81 <li><a href="pagination.html">Pagination</a></li>
82 <li><a href="preloader.html">Preloader</a></li>
83 </ul>
84 </div>
85 </li>
86 <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
87 <div class="collapsible-body">
88 <ul>
89 <li><a href="collapsible.html">Collapsible</a></li>
90 <li><a href="dialogs.html">Dialogs</a></li>
91 <li><a href="dropdown.html">Dropdown</a></li>
92 <li><a href="media.html">Media</a></li>
93 <li><a href="modals.html">Modals</a></li>
94 <li><a href="parallax.html">Parallax</a></li>
95 <li><a href="pushpin.html">Pushpin</a></li>
96 <li><a href="scrollfire.html">ScrollFire</a></li>
97 <li><a href="scrollspy.html">Scrollspy</a></li>
98 <li><a href="side-nav.html">SideNav</a></li>
99 <li><a href="tabs.html">Tabs</a></li>
100 <li><a href="transitions.html">Transitions</a></li>
101 <li><a href="waves.html">Waves</a></li>
102 </ul>
103 </div>
104 </li>
105 </ul>
106 </li>
107 <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
108 <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
109 </ul>
110 </header>
111 <main><div class="container">
112 <div class="row">
113
114 <div class="col s12 m9 l10">
115
116 <!-- Cards Section-->
117 <div id="basic" class="section scrollspy">
118 <p class="caption">Cards are a convenient means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length.</p>
119 <h2 class="header">Basic Card</h2>
120 <div class="row">
121 <div class="col s12 m6">
122 <!-- Basic Card -->
123 <div class="card blue-grey darken-1">
124 <div class="card-content white-text">
125 <span class="card-title">Card Title</span>
126 <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
127 </div>
128 <div class="card-action">
129 <a href="#">This is a link</a>
130 <a href="#">This is a link</a>
131 </div>
132 </div>
133 </div>
134
135 <div class="col s12">
136 <br>
137 <pre><code class="language-markup">
138 &lt;div class="row">
139 &lt;div class="col s12 m6">
140 &lt;div class="card blue-grey darken-1">
141 &lt;div class="card-content white-text">
142 &lt;span class="card-title">Card Title&lt;/span>
143 &lt;p>I am a very simple card. I am good at containing small bits of information.
144 I am convenient because I require little markup to use effectively.&lt;/p>
145 &lt;/div>
146 &lt;div class="card-action">
147 &lt;a href="#">This is a link&lt;/a>
148 &lt;a href="#">This is a link&lt;/a>
149 &lt;/div>
150 &lt;/div>
151 &lt;/div>
152 &lt;/div>
153 </code></pre>
154 <br>
155 </div>
156 </div>
157 </div>
158
159 <div id="image" class="section scrollspy">
160 <div class="row">
161 <!-- Image Card -->
162 <div class="col s12 m7">
163 <h2 class="header">Image Card</h2>
164 <div class="card">
165 <div class="card-image">
166 <img src="images/sample-1.jpg">
167 <span class="card-title">Card Title</span>
168 </div>
169 <div class="card-content">
170 <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
171 </div>
172 <div class="card-action">
173 <a href="#">This is a link</a>
174 </div>
175 </div>
176 </div>
177 <div class="col s12 m5">
178 <br><br><br><br>
179 <p class="caption">
180 Here is the standard card with an image thumbnail.
181 </p>
182 </div>
183 <div class="col s12">
184 <br>
185 <pre><code class="language-markup">
186 &lt;div class="row">
187 &lt;div class="col s12 m7">
188 &lt;div class="card">
189 &lt;div class="card-image">
190 &lt;img src="images/sample-1.jpg">
191 &lt;span class="card-title">Card Title&lt;/span>
192 &lt;/div>
193 &lt;div class="card-content">
194 &lt;p>I am a very simple card. I am good at containing small bits of information.
195 I am convenient because I require little markup to use effectively.&lt;/p>
196 &lt;/div>
197 &lt;div class="card-action">
198 &lt;a href="#">This is a link&lt;/a>
199 &lt;/div>
200 &lt;/div>
201 &lt;/div>
202 &lt;/div>
203 </code></pre>
204 <br>
205 </div>
206 </div>
207 </div>
208
209 <div id="reveal" class="section scrollspy">
210 <div class="row">
211 <!-- Pullup Card -->
212 <div class="col s12 m7">
213 <h2 class="header">Card Reveal</h2>
214 <div class="card">
215 <div class="card-image waves-effect waves-block waves-light">
216 <img class="activator" src="images/office.jpg">
217 </div>
218 <div class="card-content">
219 <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
220
221 <p><a href="#!">This is a link</a></p>
222 </div>
223 <div class="card-reveal">
224 <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></i></span>
225 <p>Here is some more information about this product that is only revealed once clicked on.</p>
226 </div>
227 </div>
228 </div>
229 <div class="col s12 m5">
230 <br><br><br><br>
231 <p class="caption">
232 Here you can add a card that reveals more information once clicked. Just add the <code class="language-markup">card-reveal</code> div with a <code class="language-markup">span.card-title</code> inside to make this work. Add the class <code class="language-markup">activator</code> to an element inside the card to allow it to open the card reveal.
233 </p>
234 </div>
235 <div class="col s12">
236 <br>
237 <pre><code class="language-markup">
238 &lt;div class="card">
239 &lt;div class="card-image waves-effect waves-block waves-light">
240 &lt;img class="activator" src="images/office.jpg">
241 &lt;/div>
242 &lt;div class="card-content">
243 &lt;span class="card-title activator grey-text text-darken-4">Card Title&lt;i class="material-icons right">more_vert</i>&lt;/i>&lt;/span>
244 &lt;p>&lt;a href="#">This is a link&lt;/a>&lt;/p>
245 &lt;/div>
246 &lt;div class="card-reveal">
247 &lt;span class="card-title grey-text text-darken-4">Card Title&lt;i class="material-icons right">close</i>&lt;/i>&lt;/span>
248 &lt;p>Here is some more information about this product that is only revealed once clicked on.&lt;/p>
249 &lt;/div>
250 &lt;/div>
251 </code></pre>
252 <br>
253 </div>
254 </div>
255 </div>
256
257
258 <div id="sizes" class="section scrollspy">
259 <div class="row">
260 <!-- Small Card -->
261 <div class="col s12">
262 <h2 class="header">Card Sizes</h2>
263 <p class="caption">If you want to have uniformly sized cards, you can use our premade size classes. Just add the size class in addition to the card class. </p>
264 <pre><code class="language-markup">
265 &lt;div class="card small">
266 &lt;!-- Card Content -->
267 &lt;/div>
268 </code></pre>
269 </div>
270 </div>
271 <div class="row">
272 <div class="col s12 m6">
273 <h4 class="light">Small</h4>
274 <div class="card small">
275 <div class="card-image">
276 <img src="images/sample-1.jpg">
277 <span class="card-title">Card Title</span>
278 </div>
279 <div class="card-content">
280 <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
281 </div>
282 <div class="card-action">
283 <a href="#">This is a link</a>
284 <a href="#">This is a link</a>
285 </div>
286 </div>
287 </div>
288 <div class="col s12 m6">
289 <br><br>
290 <p class="caption">
291 The Small Card limits the height of the card to 300px.
292 </p>
293 </div>
294 </div>
295
296 <div class="row">
297 <div class="col s12 m7">
298 <h4 class="light">Medium</h4>
299 <div class="card medium">
300 <div class="card-image">
301 <img src="images/sample-1.jpg">
302 <span class="card-title">Card Title</span>
303 </div>
304 <div class="card-content">
305 <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
306 </div>
307 <div class="card-action">
308 <a href="#">This is a link</a>
309 <a href="#">This is a link</a>
310 </div>
311 </div>
312 </div>
313 <div class="col s12 m5">
314 <br><br>
315 <p class="caption">
316 The Medium Card limits the height of the card to 400px.
317 </p>
318 </div>
319 </div>
320
321 <div class="row">
322 <div class="col s12 m8">
323 <h4 class="light">Large</h4>
324 <div class="card large">
325 <div class="card-image">
326 <img src="images/sample-1.jpg">
327 <span class="card-title">Card Title</span>
328 </div>
329 <div class="card-content">
330 <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
331 </div>
332 <div class="card-action">
333 <a href="#">This is a link</a>
334 <a href="#">This is a link</a>
335 </div>
336 </div>
337 </div>
338 <div class="col s12 m4">
339 <br><br>
340 <p class="caption">
341 The Large Card limits the height of the card to 500px.
342 </p>
343 </div>
344 </div>
345 </div>
346
347
348 <div id="panel" class="section scrollspy">
349 <div class="row">
350 <!-- Card Panel -->
351 <div class="col s12 m5">
352 <h2 class="header">Card Panel</h2>
353 <div class="card-panel teal"> <span class="white-text">I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.</span>
354 </div>
355 </div>
356 <div class="col s12 m7">
357 <br><br><br><br>
358 <p class="caption">
359 For a simpler card with less markup, try using a card panel which just has padding and a shadow effect
360 </p>
361 </div>
362 <div class="col s12">
363 <br>
364 <pre><code class="language-markup">
365 &lt;div class="row">
366 &lt;div class="col s12 m5">
367 &lt;div class="card-panel teal">
368 &lt;span class="white-text">I am a very simple card. I am good at containing small bits of information.
369 I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
370 &lt;/span>
371 &lt;/div>
372 &lt;/div>
373 &lt;/div>
374 </code></pre>
375 </div>
376 </div>
377 </div>
378
379
380 </div>
381
382 <div class="col hide-on-small-only m3 l2">
383 <div class="toc-wrapper">
384 <div class="buysellads hide-on-small-only">
385 <!-- CarbonAds Zone Code -->
386 <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
387 </div>
388 <div style="height: 1px;">
389 <ul class="section table-of-contents">
390 <li><a href="#basic">Basic Card</a></li>
391 <li><a href="#image">Image Card</a></li>
392 <li><a href="#reveal">Card Reveal</a></li>
393 <li><a href="#sizes">Card Sizes</a></li>
394 <li><a href="#panel">Card Panel</a></li>
395 </ul>
396 </div>
397 </div>
398 </div>
399
400 </div>
401</div>
402
403
404 </main> <footer class="page-footer">
405 <div class="container">
406 <div class="row">
407 <div class="col l4 s12">
408 <h5 class="white-text">Help Materialize Grow</h5>
409 <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
410 <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
411<input type="hidden" name="cmd" value="_s-xclick">
412<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
413">
414<button class="btn waves-effect waves-light red lighten-3" type="submit" name="action" alt="PayPal - The safer, easier way to pay online!">Donate Now
415</button>
416</form>
417
418 </div>
419 <div class="col l4 s12">
420 <h5 class="white-text">Join the Discussion</h5>
421 <p class="grey-text text-lighten-4">We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p>
422 <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
423 </div>
424 <div class="col l4 s12" style="overflow: hidden;">
425 <h5 class="white-text">Connect</h5>
426 <iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
427 <br>
428 <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
429 <br>
430 <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
431 </div>
432 </div>
433 </div>
434 <div class="footer-copyright">
435 <div class="container">
436 © 2014-2015 Materialize, All rights reserved.
437 <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
438 </div>
439 </div>
440 </footer>
441 <!-- Scripts-->
442 <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
443 <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
444 </script>
445 <script src="js/jquery.timeago.min.js"></script>
446 <script src="js/prism.js"></script>
447 <script src="jade/lunr.min.js"></script>
448 <script src="jade/search.js"></script>
449 <script src="bin/materialize.js"></script>
450 <script src="js/init.js"></script>
451 <!-- Twitter Button -->
452 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
453
454 <!-- Google Plus Button-->
455 <script src="https://apis.google.com/js/platform.js" async defer></script>
456
457 <!-- Google Analytics -->
458 <script>
459 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
460 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
461 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
462 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
463
464 ga('create', 'UA-56218128-1', 'auto');
465 ga('require', 'displayfeatures');
466 ga('send', 'pageview');
467 </script>
468 </body>
469</html>
\No newline at end of file