UNPKG

34.7 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="material-icons">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="css-transitions.html">Transitions</a></li>
65 <li><a href="typography.html">Typography</a></li>
66 </ul>
67 </div>
68 </li>
69 <li class="bold"><a class="collapsible-header active waves-effect waves-teal">Components</a>
70 <div class="collapsible-body">
71 <ul>
72 <li><a href="badges.html">Badges</a></li>
73 <li><a href="buttons.html">Buttons</a></li>
74 <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
75 <li class="active"><a href="cards.html">Cards</a></li>
76 <li><a href="chips.html">Chips</a></li>
77 <li><a href="collections.html">Collections</a></li>
78 <li><a href="footer.html">Footer</a></li>
79 <li><a href="forms.html">Forms</a></li>
80 <li><a href="icons.html">Icons</a></li>
81 <li><a href="navbar.html">Navbar</a></li>
82 <li><a href="pagination.html">Pagination</a></li>
83 <li><a href="preloader.html">Preloader</a></li>
84 </ul>
85 </div>
86 </li>
87 <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
88 <div class="collapsible-body">
89 <ul>
90 <li><a href="carousel.html">Carousel</a></li>
91 <li><a href="collapsible.html">Collapsible</a></li>
92 <li><a href="dialogs.html">Dialogs</a></li>
93 <li><a href="dropdown.html">Dropdown</a></li>
94 <li><a href="media.html">Media</a></li>
95 <li><a href="modals.html">Modals</a></li>
96 <li><a href="parallax.html">Parallax</a></li>
97 <li><a href="pushpin.html">Pushpin</a></li>
98 <li><a href="scrollfire.html">ScrollFire</a></li>
99 <li><a href="scrollspy.html">Scrollspy</a></li>
100 <li><a href="side-nav.html">SideNav</a></li>
101 <li><a href="tabs.html">Tabs</a></li>
102 <li><a href="transitions.html">Transitions</a></li>
103 <li><a href="waves.html">Waves</a></li>
104 </ul>
105 </div>
106 </li>
107 </ul>
108 </li>
109 <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
110 <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
111 </ul>
112 </header>
113 <main><div class="container">
114 <div class="row">
115
116 <div class="col s12 m9 l10">
117
118 <!-- Cards Section-->
119 <div id="basic" class="section scrollspy">
120 <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>
121 <h2 class="header">Basic Card</h2>
122 <div class="row">
123 <div class="col s12 m6">
124 <!-- Basic Card -->
125 <div class="card blue-grey darken-1">
126 <div class="card-content white-text">
127 <span class="card-title">Card Title</span>
128 <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>
129 </div>
130 <div class="card-action">
131 <a href="#">This is a link</a>
132 <a href="#">This is a link</a>
133 </div>
134 </div>
135 </div>
136
137 <div class="col s12">
138 <br>
139 <pre><code class="language-markup">
140 &lt;div class="row">
141 &lt;div class="col s12 m6">
142 &lt;div class="card blue-grey darken-1">
143 &lt;div class="card-content white-text">
144 &lt;span class="card-title">Card Title&lt;/span>
145 &lt;p>I am a very simple card. I am good at containing small bits of information.
146 I am convenient because I require little markup to use effectively.&lt;/p>
147 &lt;/div>
148 &lt;div class="card-action">
149 &lt;a href="#">This is a link&lt;/a>
150 &lt;a href="#">This is a link&lt;/a>
151 &lt;/div>
152 &lt;/div>
153 &lt;/div>
154 &lt;/div>
155 </code></pre>
156 <br>
157 </div>
158 </div>
159 </div>
160
161 <div id="image" class="section scrollspy">
162 <div class="row">
163 <!-- Image Card -->
164 <div class="col s12 m7">
165 <h2 class="header">Image Card</h2>
166 <div class="card">
167 <div class="card-image">
168 <img src="images/sample-1.jpg">
169 <span class="card-title">Card Title</span>
170 </div>
171 <div class="card-content">
172 <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>
173 </div>
174 <div class="card-action">
175 <a href="#">This is a link</a>
176 </div>
177 </div>
178 </div>
179 <div class="col s12 m5">
180 <br><br><br><br>
181 <p class="caption">
182 Here is the standard card with an image thumbnail.
183 </p>
184 </div>
185 <div class="col s12">
186 <br>
187 <pre><code class="language-markup">
188 &lt;div class="row">
189 &lt;div class="col s12 m7">
190 &lt;div class="card">
191 &lt;div class="card-image">
192 &lt;img src="images/sample-1.jpg">
193 &lt;span class="card-title">Card Title&lt;/span>
194 &lt;/div>
195 &lt;div class="card-content">
196 &lt;p>I am a very simple card. I am good at containing small bits of information.
197 I am convenient because I require little markup to use effectively.&lt;/p>
198 &lt;/div>
199 &lt;div class="card-action">
200 &lt;a href="#">This is a link&lt;/a>
201 &lt;/div>
202 &lt;/div>
203 &lt;/div>
204 &lt;/div>
205 </code></pre>
206 <br>
207 </div>
208 </div>
209 </div>
210
211 <div id="fab" class="section scrollspy">
212 <div class="row">
213 <!-- Image Card -->
214 <div class="col s12 m7">
215 <h2 class="header">FABs in Cards</h2>
216 <div class="card">
217 <div class="card-image">
218 <img src="images/sample-1.jpg">
219 <span class="card-title">Card Title</span>
220 <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
221 </div>
222 <div class="card-content">
223 <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>
224 </div>
225 </div>
226 </div>
227 <div class="col s12 m5">
228 <br><br><br><br>
229 <p class="caption">
230 Here is an image card with a Floating Action Button.
231 </p>
232 </div>
233 </div>
234 <div class="row">
235 <div class="col s12 m7">
236 <div class="card">
237 <div class="card-image">
238 <img src="images/sample-1.jpg">
239 <a class="btn-floating btn-large halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
240 </div>
241 <div class="card-content">
242 <span class="card-title">Card Title</span>
243 <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>
244 </div>
245 </div>
246 </div>
247 <div class="col s12 m5">
248 <p class="caption">
249 Here is an image card with a large Floating Action Button.
250 </p>
251 </div>
252 <div class="col s12">
253 <br>
254 <pre><code class="language-markup">
255 &lt;div class="row">
256 &lt;div class="col s12 m6">
257 &lt;div class="card">
258 &lt;div class="card-image">
259 &lt;img src="images/sample-1.jpg">
260 &lt;span class="card-title">Card Title&lt;/span>
261 &lt;a class="btn-floating halfway-fab waves-effect waves-light red">&lt;i class="material-icons">add&lt;/i>&lt;/a>
262 &lt;/div>
263 &lt;div class="card-content">
264 &lt;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.&lt;/p>
265 &lt;/div>
266 &lt;/div>
267 &lt;/div>
268 &lt;/div>
269 </code></pre>
270 <br>
271 </div>
272 </div>
273 </div>
274
275 <div id="horizontal" class="section scrollspy">
276 <div class="row">
277 <!-- Horizontal Card -->
278 <div class="col s12 m7">
279 <h2 class="header">Horizontal Card</h2>
280 <div class="card horizontal">
281 <div class="card-image">
282 <img src="http://lorempixel.com/100/190/nature/6">
283 </div>
284 <div class="card-stacked">
285 <div class="card-content">
286 <p>I am a very simple card. I am good at containing small bits of information.</p>
287 </div>
288 <div class="card-action">
289 <a href="#">This is a link</a>
290 </div>
291 </div>
292 </div>
293 </div>
294 <div class="col s12 m5">
295 <br><br><br><br>
296 <p class="caption">
297 Here is the standard card with a horizontal image.
298 </p>
299 </div>
300 <div class="col s12">
301 <br>
302 <pre><code class="language-markup">
303 &lt;div class="col s12 m7">
304 &lt;h2 class="header">Horizontal Card&lt;/h2>
305 &lt;div class="card horizontal">
306 &lt;div class="card-image">
307 &lt;img src="http://lorempixel.com/100/190/nature/6">
308 &lt;/div>
309 &lt;div class="card-stacked">
310 &lt;div class="card-content">
311 &lt;p>I am a very simple card. I am good at containing small bits of information.&lt;/p>
312 &lt;/div>
313 &lt;div class="card-action">
314 &lt;a href="#">This is a link&lt;/a>
315 &lt;/div>
316 &lt;/div>
317 &lt;/div>
318 &lt;/div>
319 </code></pre>
320 <br>
321 </div>
322 </div>
323 </div>
324
325 <div id="reveal" class="section scrollspy">
326 <div class="row">
327 <!-- Pullup Card -->
328 <div class="col s12 m7">
329 <h2 class="header">Card Reveal</h2>
330 <div class="card">
331 <div class="card-image waves-effect waves-block waves-light">
332 <img class="activator" src="images/office.jpg">
333 </div>
334 <div class="card-content">
335 <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
336
337 <p><a href="#!">This is a link</a></p>
338 </div>
339 <div class="card-reveal">
340 <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></i></span>
341 <p>Here is some more information about this product that is only revealed once clicked on.</p>
342 </div>
343 </div>
344 </div>
345 <div class="col s12 m5">
346 <br><br><br><br>
347 <p class="caption">
348 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.
349 </p>
350 </div>
351 <div class="col s12">
352 <br>
353 <pre><code class="language-markup">
354 &lt;div class="card">
355 &lt;div class="card-image waves-effect waves-block waves-light">
356 &lt;img class="activator" src="images/office.jpg">
357 &lt;/div>
358 &lt;div class="card-content">
359 &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>
360 &lt;p>&lt;a href="#">This is a link&lt;/a>&lt;/p>
361 &lt;/div>
362 &lt;div class="card-reveal">
363 &lt;span class="card-title grey-text text-darken-4">Card Title&lt;i class="material-icons right">close</i>&lt;/i>&lt;/span>
364 &lt;p>Here is some more information about this product that is only revealed once clicked on.&lt;/p>
365 &lt;/div>
366 &lt;/div>
367 </code></pre>
368 </div>
369 </div>
370 <div class="row">
371 <div class="col s12 m6">
372 <h4 class="light">Card Action Options</h4>
373 <div class="card">
374 <div class="card-image waves-effect waves-block waves-light">
375 <img class="activator" src="images/office.jpg">
376 </div>
377 <div class="card-content">
378 <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
379
380 <p><a href="#!">This is a link</a></p>
381 </div>
382 <div class="card-reveal">
383 <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></i></span>
384 <p>Here is some more information about this product that is only revealed once clicked on.</p>
385 </div>
386
387 <div class="card-action">
388 <a href="#">This is a link</a>
389 <a href="#">This is a link</a>
390 </div>
391 </div>
392 </div>
393 <div class="col s12 m6">
394 <br><br>
395 <p class="caption">
396 The default state is having the card-reveal go over the card-action.
397 </p>
398 </div>
399 </div>
400 <div class="row">
401 <div class="col s12 m6">
402 <div class="card sticky-action">
403 <div class="card-image waves-effect waves-block waves-light">
404 <img class="activator" src="images/office.jpg">
405 </div>
406 <div class="card-content">
407 <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
408
409 <p><a href="#!">This is a link</a></p>
410 </div>
411
412 <div class="card-action">
413 <a href="#">This is a link</a>
414 <a href="#">This is a link</a>
415 </div>
416
417 <div class="card-reveal">
418 <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></i></span>
419 <p>Here is some more information about this product that is only revealed once clicked on.</p>
420 </div>
421 </div>
422 </div>
423 <div class="col s12 m6">
424 <p class="caption">
425 You can make your card-action always visible by adding the class <code class="language-markup">sticky-action</code> to the overall card.
426 </p>
427 </div>
428 <div class="col s12">
429 <br>
430 <pre><code class="language-markup">
431 &lt;div class="card sticky-action">
432 ...
433
434 &lt;div class="card-action">...&lt;/div>
435
436 &lt;div class="card-reveal">...&lt;/div>
437 &lt;/div>
438 </code></pre>
439 </div>
440 </div>
441 </div>
442
443
444 <div id="tabs" class="section scrollspy">
445 <div class="row">
446 <!-- Small Card -->
447 <div class="col s12">
448 <h2 class="header">Tabs in Cards</h2>
449 <p class="caption">
450 You can add tabs to your cards by adding a dividing <code class="language-markup">cards-tabs</code> div inbetween your header content and your tab content.
451 </p>
452 <pre><code class="language-markup">
453 &lt;div class="card">
454 &lt;div class="card-content">
455 &lt;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.&lt;/p>
456 &lt;/div>
457 &lt;div class="card-tabs">
458 &lt;ul class="tabs tabs-fixed-width">
459 &lt;li class="tab">&lt;a href="#test4">Test 1&lt;/a>&lt;/li>
460 &lt;li class="tab">&lt;a class="active" href="#test5">Test 2&lt;/a>&lt;/li>
461 &lt;li class="tab">&lt;a href="#test6">Test 3&lt;/a>&lt;/li>
462 &lt;/ul>
463 &lt;/div>
464 &lt;div class="card-content grey lighten-4">
465 &lt;div id="test4">Test 1&lt;/div>
466 &lt;div id="test5">Test 2&lt;/div>
467 &lt;div id="test6">Test 3&lt;/div>
468 &lt;/div>
469 &lt;/div></code></pre>
470 </div>
471 </div>
472 <div class="row">
473 <div class="col s12 m6">
474 <h4 class="light">White</h4>
475 <div class="card">
476 <div class="card-content">
477 <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>
478 </div>
479 <div class="card-tabs">
480 <ul class="tabs tabs-fixed-width">
481 <li class="tab"><a href="#test4">Test 1</a></li>
482 <li class="tab"><a class="active" href="#test5">Test 2</a></li>
483 <li class="tab"><a href="#test6">Test 3</a></li>
484 </ul>
485 </div>
486 <div class="card-content grey lighten-4">
487 <div id="test4">Test 1</div>
488 <div id="test5">Test 2</div>
489 <div id="test6">Test 3</div>
490 </div>
491 </div>
492 </div>
493 <div class="col s12 m6">
494 <br><br>
495 <p class="caption">
496 Basic white background card with tabs.
497 </p>
498 </div>
499 </div>
500 <div class="row">
501 <div class="col s12 m6">
502 <h4 class="light">Colored</h4>
503 <div class="card blue">
504 <div class="card-content white-text">
505 <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>
506 </div>
507 <div class="card-tabs">
508 <ul class="tabs tabs-fixed-width tabs-transparent">
509 <li class="tab"><a href="#test1">Test 1</a></li>
510 <li class="tab"><a class="active" href="#test2">Test 2</a></li>
511 <li class="tab"><a href="#test3">Test 3</a></li>
512 </ul>
513 </div>
514 <div class="card-content blue lighten-5">
515 <div id="test1">Test 1</div>
516 <div id="test2">Test 2</div>
517 <div id="test3">Test 3</div>
518 </div>
519 </div>
520 </div>
521 <div class="col s12 m6">
522 <br><br>
523 <p class="caption">
524 Colored or dark background card with tabs.
525 </p>
526 </div>
527 </div>
528 </div>
529
530
531 <div id="sizes" class="section scrollspy">
532 <div class="row">
533 <!-- Small Card -->
534 <div class="col s12">
535 <h2 class="header">Card Sizes</h2>
536 <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>
537 <pre><code class="language-markup">
538 &lt;div class="card small">
539 &lt;!-- Card Content -->
540 &lt;/div>
541 </code></pre>
542 </div>
543 </div>
544 <div class="row">
545 <div class="col s12 m6">
546 <h4 class="light">Small</h4>
547 <div class="card small">
548 <div class="card-image">
549 <img src="images/sample-1.jpg">
550 <span class="card-title">Card Title</span>
551 </div>
552 <div class="card-content">
553 <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>
554 </div>
555 <div class="card-action">
556 <a href="#">This is a link</a>
557 <a href="#">This is a link</a>
558 </div>
559 </div>
560 </div>
561 <div class="col s12 m6">
562 <br><br>
563 <p class="caption">
564 The Small Card limits the height of the card to 300px.
565 </p>
566 </div>
567 </div>
568
569 <div class="row">
570 <div class="col s12 m7">
571 <h4 class="light">Medium</h4>
572 <div class="card medium">
573 <div class="card-image">
574 <img src="images/sample-1.jpg">
575 <span class="card-title">Card Title</span>
576 </div>
577 <div class="card-content">
578 <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>
579 </div>
580 <div class="card-action">
581 <a href="#">This is a link</a>
582 <a href="#">This is a link</a>
583 </div>
584 </div>
585 </div>
586 <div class="col s12 m5">
587 <br><br>
588 <p class="caption">
589 The Medium Card limits the height of the card to 400px.
590 </p>
591 </div>
592 </div>
593
594 <div class="row">
595 <div class="col s12 m8">
596 <h4 class="light">Large</h4>
597 <div class="card large">
598 <div class="card-image">
599 <img src="images/sample-1.jpg">
600 <span class="card-title">Card Title</span>
601 </div>
602 <div class="card-content">
603 <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>
604 </div>
605 <div class="card-action">
606 <a href="#">This is a link</a>
607 <a href="#">This is a link</a>
608 </div>
609 </div>
610 </div>
611 <div class="col s12 m4">
612 <br><br>
613 <p class="caption">
614 The Large Card limits the height of the card to 500px.
615 </p>
616 </div>
617 </div>
618 </div>
619
620
621 <div id="panel" class="section scrollspy">
622 <div class="row">
623 <!-- Card Panel -->
624 <div class="col s12 m5">
625 <h2 class="header">Card Panel</h2>
626 <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>
627 </div>
628 </div>
629 <div class="col s12 m7">
630 <br><br><br><br>
631 <p class="caption">
632 For a simpler card with less markup, try using a card panel which just has padding and a shadow effect
633 </p>
634 </div>
635 <div class="col s12">
636 <br>
637 <pre><code class="language-markup">
638 &lt;div class="row">
639 &lt;div class="col s12 m5">
640 &lt;div class="card-panel teal">
641 &lt;span class="white-text">I am a very simple card. I am good at containing small bits of information.
642 I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
643 &lt;/span>
644 &lt;/div>
645 &lt;/div>
646 &lt;/div>
647 </code></pre>
648 </div>
649 </div>
650 </div>
651
652
653 </div>
654
655 <div class="col hide-on-small-only m3 l2">
656 <div class="toc-wrapper">
657 <div class="buysellads hide-on-small-only">
658 <!-- CarbonAds Zone Code -->
659 <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
660 </div>
661 <div style="height: 1px;">
662 <ul class="section table-of-contents">
663 <li><a href="#basic">Basic Card</a></li>
664 <li><a href="#image">Image Card</a></li>
665 <li><a href="#fab">FABs in Cards</a></li>
666 <li><a href="#horizontal">Horizontal Card</a></li>
667 <li><a href="#reveal">Card Reveal</a></li>
668 <li><a href="#tabs">Tabs in Cards</a></li>
669 <li><a href="#sizes">Card Sizes</a></li>
670 <li><a href="#panel">Card Panel</a></li>
671 </ul>
672 </div>
673 </div>
674 </div>
675
676 </div>
677</div>
678
679
680 </main> <footer class="page-footer">
681 <div class="container">
682 <div class="row">
683 <div class="col l4 s12">
684 <h5 class="white-text">Help Materialize Grow</h5>
685 <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>
686 <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
687<input type="hidden" name="cmd" value="_s-xclick">
688<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
689">
690<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
691</button>
692</form>
693
694 </div>
695 <div class="col l4 s12">
696 <h5 class="white-text">Join the Discussion</h5>
697 <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>
698 <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
699 </div>
700 <div class="col l4 s12" style="overflow: hidden;">
701 <h5 class="white-text">Connect</h5>
702 <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>
703 <br>
704 <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
705 <br>
706 <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
707 </div>
708 </div>
709 </div>
710 <div class="footer-copyright">
711 <div class="container">
712 © 2014-2017 Materialize, All rights reserved.
713 <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
714 </div>
715 </div>
716 </footer>
717
718 <!-- Scripts-->
719 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
720 <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
721 </script>
722 <script src="js/jquery.timeago.min.js"></script>
723 <script src="js/prism.js"></script>
724 <script src="jade/lunr.min.js"></script>
725 <script src="jade/search.js"></script>
726 <script src="bin/materialize.js"></script>
727 <script src="js/init.js"></script>
728 <!-- Twitter Button -->
729 <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>
730
731 <!-- Google Plus Button-->
732 <script src="https://apis.google.com/js/platform.js" async defer></script>
733
734 <!-- Google Analytics -->
735 <script>
736 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
737 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
738 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
739 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
740
741 ga('create', 'UA-56218128-1', 'auto');
742 ga('require', 'displayfeatures');
743 ga('send', 'pageview');
744 </script>
745
746 </body>
747</html>
\No newline at end of file