materialize-css
Version:
Builds Materialize distribution packages
414 lines (388 loc) • 16.2 kB
HTML
<div class="container">
<div class="row">
<div class="col s12 m9 l10">
<!-- Cards Section-->
<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">
<!-- Basic Card -->
<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">
<!-- Image Card -->
<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="horizontal" class="section scrollspy">
<div class="row">
<!-- Horizontal Card -->
<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/10">
</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/10">
</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">
<!-- Pullup Card -->
<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="sizes" class="section scrollspy">
<div class="row">
<!-- Small Card -->
<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">
<!-- Card Content -->
</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">
<!-- Card Panel -->
<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">
<!-- CarbonAds Zone Code -->
<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="#horizontal">Horizontal Card</a></li>
<li><a href="#reveal">Card Reveal</a></li>
<li><a href="#sizes">Card Sizes</a></li>
<li><a href="#panel">Card Panel</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>