materialize-css

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="msapplication-tap-highlight" content="no"> <meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. "> <title>Cards - Materialize</title>  <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png"> <meta name="msapplication-TileColor" content="#FFFFFF"> <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png"> <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">  <meta name="theme-color" content="#EE6E73">  <link href="css/prism.css" rel="stylesheet"> <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection"> <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script> window.liveSettings = { api_key: "a0b49b34b93844c38eaee15690d86413", picker: "bottom-right", detectlang: true, dynamic: true, autocollect: true }; </script> <script src="//cdn.transifex.com/live.js"></script> </head> <body> <header> <nav class="top-nav"> <div class="container"> <div class="nav-wrapper"><a class="page-title">Cards</a></div> </div> </nav> <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> <ul id="nav-mobile" class="side-nav fixed"> <li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo"> <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li> <li class="search"> <div class="search-wrapper card"> <input id="search"><i class="material-icons">search</i> <div class="search-results"></div> </div> </li> <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li> <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li> <li class="no-padding"> <ul class="collapsible collapsible-accordion"> <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a> <div class="collapsible-body"> <ul> <li><a href="color.html">Color</a></li> <li><a href="grid.html">Grid</a></li> <li><a href="helpers.html">Helpers</a></li> <li><a href="media-css.html">Media</a></li> <li><a href="sass.html">Sass</a></li> <li><a href="shadow.html">Shadow</a></li> <li><a href="table.html">Table</a></li> <li><a href="css-transitions.html">Transitions</a></li> <li><a href="typography.html">Typography</a></li> </ul> </div> </li> <li class="bold"><a class="collapsible-header active waves-effect waves-teal">Components</a> <div class="collapsible-body"> <ul> <li><a href="badges.html">Badges</a></li> <li><a href="buttons.html">Buttons</a></li> <li><a href="breadcrumbs.html">Breadcrumbs</a></li> <li class="active"><a href="cards.html">Cards</a></li> <li><a href="chips.html">Chips</a></li> <li><a href="collections.html">Collections</a></li> <li><a href="footer.html">Footer</a></li> <li><a href="forms.html">Forms</a></li> <li><a href="icons.html">Icons</a></li> <li><a href="navbar.html">Navbar</a></li> <li><a href="pagination.html">Pagination</a></li> <li><a href="preloader.html">Preloader</a></li> </ul> </div> </li> <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a> <div class="collapsible-body"> <ul> <li><a href="carousel.html">Carousel</a></li> <li><a href="collapsible.html">Collapsible</a></li> <li><a href="dialogs.html">Dialogs</a></li> <li><a href="dropdown.html">Dropdown</a></li> <li><a href="media.html">Media</a></li> <li><a href="modals.html">Modals</a></li> <li><a href="parallax.html">Parallax</a></li> <li><a href="pushpin.html">Pushpin</a></li> <li><a href="scrollfire.html">ScrollFire</a></li> <li><a href="scrollspy.html">Scrollspy</a></li> <li><a href="side-nav.html">SideNav</a></li> <li><a href="tabs.html">Tabs</a></li> <li><a href="transitions.html">Transitions</a></li> <li><a href="waves.html">Waves</a></li> </ul> </div> </li> </ul> </li> <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li> <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li> </ul> </header> <main><div class="container"> <div class="row"> <div class="col s12 m9 l10">  <div id="basic" class="section scrollspy"> <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> <h2 class="header">Basic Card</h2> <div class="row"> <div class="col s12 m6">  <div class="card blue-grey darken-1"> <div class="card-content white-text"> <span class="card-title">Card Title</span> <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> </div> <div class="card-action"> <a href="#">This is a link</a> <a href="#">This is a link</a> </div> </div> </div> <div class="col s12"> <br> <pre><code class="language-markup"> <div class="row"> <div class="col s12 m6"> <div class="card blue-grey darken-1"> <div class="card-content white-text"> <span class="card-title">Card Title</span> <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> </div> <div class="card-action"> <a href="#">This is a link</a> <a href="#">This is a link</a> </div> </div> </div> </div> </code></pre> <br> </div> </div> </div> <div id="image" class="section scrollspy"> <div class="row">  <div class="col s12 m7"> <h2 class="header">Image Card</h2> <div class="card"> <div class="card-image"> <img src="images/sample-1.jpg"> <span class="card-title">Card Title</span> </div> <div class="card-content"> <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> </div> <div class="card-action"> <a href="#">This is a link</a> </div> </div> </div> <div class="col s12 m5"> <br><br><br><br> <p class="caption"> Here is the standard card with an image thumbnail. </p> </div> <div class="col s12"> <br> <pre><code class="language-markup"> <div class="row"> <div class="col s12 m7"> <div class="card"> <div class="card-image"> <img src="images/sample-1.jpg"> <span class="card-title">Card Title</span> </div> <div class="card-content"> <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> </div> <div class="card-action"> <a href="#">This is a link</a> </div> </div> </div> </div> </code></pre> <br> </div> </div> </div> <div id="fab" class="section scrollspy"> <div class="row">  <div class="col s12 m7"> <h2 class="header">FABs in Cards</h2> <div class="card"> <div class="card-image"> <img src="images/sample-1.jpg"> <span class="card-title">Card Title</span> <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a> </div> <div class="card-content"> <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> </div> </div> </div> <div class="col s12 m5"> <br><br><br><br> <p class="caption"> Here is an image card with a Floating Action Button. </p> </div> </div> <div class="row"> <div class="col s12 m7"> <div class="card"> <div class="card-image"> <img src="images/sample-1.jpg"> <a class="btn-floating btn-large halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a> </div> <div class="card-content"> <span class="card-title">Card Title</span> <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> </div> </div> </div> <div class="col s12 m5"> <p class="caption"> Here is an image card with a large Floating Action Button. </p> </div> <div class="col s12"> <br> <pre><code class="language-markup"> <div class="row"> <div class="col s12 m6"> <div class="card"> <div class="card-image"> <img src="images/sample-1.jpg"> <span class="card-title">Card Title</span> <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a> </div> <div class="card-content"> <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> </div> </div> </div> </div> </code></pre> <br> </div> </div> </div> <div id="horizontal" class="section scrollspy"> <div class="row">  <div class="col s12 m7"> <h2 class="header">Horizontal Card</h2> <div class="card horizontal"> <div class="card-image"> <img src="http://lorempixel.com/100/190/nature/6"> </div> <div class="card-stacked"> <div class="card-content"> <p>I am a very simple card. I am good at containing small bits of information.</p> </div> <div class="card-action"> <a href="#">This is a link</a> </div> </div> </div> </div> <div class="col s12 m5"> <br><br><br><br> <p class="caption"> Here is the standard card with a horizontal image. </p> </div> <div class="col s12"> <br> <pre><code class="language-markup"> <div class="col s12 m7"> <h2 class="header">Horizontal Card</h2> <div class="card horizontal"> <div class="card-image"> <img src="http://lorempixel.com/100/190/nature/6"> </div> <div class="card-stacked"> <div class="card-content"> <p>I am a very simple card. I am good at containing small bits of information.</p> </div> <div class="card-action"> <a href="#">This is a link</a> </div> </div> </div> </div> </code></pre> <br> </div> </div> </div> <div id="reveal" class="section scrollspy"> <div class="row">  <div class="col s12 m7"> <h2 class="header">Card Reveal</h2> <div class="card"> <div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="images/office.jpg"> </div> <div class="card-content"> <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span> <p><a href="#!">This is a link</a></p> </div> <div class="card-reveal"> <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></i></span> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div> </div> </div> <div class="col s12 m5"> <br><br><br><br> <p class="caption"> 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. </p> </div> <div class="col s12"> <br> <pre><code class="language-markup"> <div class="card"> <div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="images/office.jpg"> </div> <div class="card-content"> <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></i></span> <p><a href="#">This is a link</a></p> </div> <div class="card-reveal"> <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></i></span> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div> </div> </code></pre> </div> </div> <div class="row"> <div class="col s12 m6"> <h4 class="light">Card Action Options</h4> <div class="card"> <div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="images/office.jpg"> </div> <div class="card-content"> <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span> <p><a href="#!">This is a link</a></p> </div> <div class="card-reveal"> <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></i></span> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div> <div class="card-action"> <a href="#">This is a link</a> <a href="#">This is a link</a> </div> </div> </div> <div class="col s12 m6"> <br><br> <p class="caption"> The default state is having the card-reveal go over the card-action. </p> </div> </div> <div class="row"> <div class="col s12 m6"> <div class="card sticky-action"> <div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="images/office.jpg"> </div> <div class="card-content"> <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span> <p><a href="#!">This is a link</a></p> </div> <div class="card-action"> <a href="#">This is a link</a> <a href="#">This is a link</a> </div> <div class="card-reveal"> <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></i></span> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div> </div> </div> <div class="col s12 m6"> <p class="caption"> You can make your card-action always visible by adding the class <code class="language-markup">sticky-action</code> to the overall card. </p> </div> <div class="col s12"> <br> <pre><code class="language-markup"> <div class="card sticky-action"> ... <div class="card-action">...</div> <div class="card-reveal">...</div> </div> </code></pre> </div> </div> </div> <div id="tabs" class="section scrollspy"> <div class="row">  <div class="col s12"> <h2 class="header">Tabs in Cards</h2> <p class="caption"> 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. </p> <pre><code class="language-markup"> <div class="card"> <div class="card-content"> <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> </div> <div class="card-tabs"> <ul class="tabs tabs-fixed-width"> <li class="tab"><a href="#test4">Test 1</a></li> <li class="tab"><a class="active" href="#test5">Test 2</a></li> <li class="tab"><a href="#test6">Test 3</a></li> </ul> </div> <div class="card-content grey lighten-4"> <div id="test4">Test 1</div> <div id="test5">Test 2</div> <div id="test6">Test 3</div> </div> </div></code></pre> </div> </div> <div class="row"> <div class="col s12 m6"> <h4 class="light">White</h4> <div class="card"> <div class="card-content"> <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> </div> <div class="card-tabs"> <ul class="tabs tabs-fixed-width"> <li class="tab"><a href="#test4">Test 1</a></li> <li class="tab"><a class="active" href="#test5">Test 2</a></li> <li class="tab"><a href="#test6">Test 3</a></li> </ul> </div> <div class="card-content grey lighten-4"> <div id="test4">Test 1</div> <div id="test5">Test 2</div> <div id="test6">Test 3</div> </div> </div> </div> <div class="col s12 m6"> <br><br> <p class="caption"> Basic white background card with tabs. </p> </div> </div> <div class="row"> <div class="col s12 m6"> <h4 class="light">Colored</h4> <div class="card blue"> <div class="card-content white-text"> <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> </div> <div class="card-tabs"> <ul class="tabs tabs-fixed-width tabs-transparent"> <li class="tab"><a href="#test1">Test 1</a></li> <li class="tab"><a class="active" href="#test2">Test 2</a></li> <li class="tab"><a href="#test3">Test 3</a></li> </ul> </div> <div class="card-content blue lighten-5"> <div id="test1">Test 1</div> <div id="test2">Test 2</div> <div id="test3">Test 3</div> </div> </div> </div> <div class="col s12 m6"> <br><br> <p class="caption"> Colored or dark background card with tabs. </p> </div> </div> </div> <div id="sizes" class="section scrollspy"> <div class="row">  <div class="col s12"> <h2 class="header">Card Sizes</h2> <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> <pre><code class="language-markup"> <div class="card small">  </div> </code></pre> </div> </div> <div class="row"> <div class="col s12 m6"> <h4 class="light">Small</h4> <div class="card small"> <div class="card-image"> <img src="images/sample-1.jpg"> <span class="card-title">Card Title</span> </div> <div class="card-content"> <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> </div> <div class="card-action"> <a href="#">This is a link</a> <a href="#">This is a link</a> </div> </div> </div> <div class="col s12 m6"> <br><br> <p class="caption"> The Small Card limits the height of the card to 300px. </p> </div> </div> <div class="row"> <div class="col s12 m7"> <h4 class="light">Medium</h4> <div class="card medium"> <div class="card-image"> <img src="images/sample-1.jpg"> <span class="card-title">Card Title</span> </div> <div class="card-content"> <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> </div> <div class="card-action"> <a href="#">This is a link</a> <a href="#">This is a link</a> </div> </div> </div> <div class="col s12 m5"> <br><br> <p class="caption"> The Medium Card limits the height of the card to 400px. </p> </div> </div> <div class="row"> <div class="col s12 m8"> <h4 class="light">Large</h4> <div class="card large"> <div class="card-image"> <img src="images/sample-1.jpg"> <span class="card-title">Card Title</span> </div> <div class="card-content"> <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> </div> <div class="card-action"> <a href="#">This is a link</a> <a href="#">This is a link</a> </div> </div> </div> <div class="col s12 m4"> <br><br> <p class="caption"> The Large Card limits the height of the card to 500px. </p> </div> </div> </div> <div id="panel" class="section scrollspy"> <div class="row">  <div class="col s12 m5"> <h2 class="header">Card Panel</h2> <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> </div> </div> <div class="col s12 m7"> <br><br><br><br> <p class="caption"> For a simpler card with less markup, try using a card panel which just has padding and a shadow effect </p> </div> <div class="col s12"> <br> <pre><code class="language-markup"> <div class="row"> <div class="col s12 m5"> <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> </div> </div> </div> </code></pre> </div> </div> </div> </div> <div class="col hide-on-small-only m3 l2"> <div class="toc-wrapper"> <div class="buysellads hide-on-small-only">  <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script> </div> <div style="height: 1px;"> <ul class="section table-of-contents"> <li><a href="#basic">Basic Card</a></li> <li><a href="#image">Image Card</a></li> <li><a href="#fab">FABs in Cards</a></li> <li><a href="#horizontal">Horizontal Card</a></li> <li><a href="#reveal">Card Reveal</a></li> <li><a href="#tabs">Tabs in Cards</a></li> <li><a href="#sizes">Card Sizes</a></li> <li><a href="#panel">Card Panel</a></li> </ul> </div> </div> </div> </div> </div> </main> <footer class="page-footer"> <div class="container"> <div class="row"> <div class="col l4 s12"> <h5 class="white-text">Help Materialize Grow</h5> <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> <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7----- "> <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 </button> </form> </div> <div class="col l4 s12"> <h5 class="white-text">Join the Discussion</h5> <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> <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a> </div> <div class="col l4 s12" style="overflow: hidden;"> <h5 class="white-text">Connect</h5> <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> <br> <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a> <br> <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div> </div> </div> </div> <div class="footer-copyright"> <div class="container"> © 2014-2017 Materialize, All rights reserved. <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a> </div> </div> </footer>  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); } </script> <script src="js/jquery.timeago.min.js"></script> <script src="js/prism.js"></script> <script src="jade/lunr.min.js"></script> <script src="jade/search.js"></script> <script src="bin/materialize.js"></script> <script src="js/init.js"></script>  <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>  <script src="https://apis.google.com/js/platform.js" async defer></script>  <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-56218128-1', 'auto'); ga('require', 'displayfeatures'); ga('send', 'pageview'); </script> </body> </html>