Cards

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.

Basic Card

Card Title

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.



      <div class="row">
        <div class="col s12 m6">
          <div class="card blue-grey">
            <div class="card-content white-text">
              <span class="card-title primary-color-text">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>
            

Image Card

Card Title

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.





Here is the standard card with an image thumbnail.



      <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>
            

FABs in Cards

add
Card Title

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.





Here is an image card with a Floating Action Button.



      <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>
            

Horizontal Card

I am a very simple card. I am good at containing small bits of information.





Here is the standard card with a horizontal image.



      <div class="row">
        <div class="col s12 m7">
          <div class="card horizontal">
            <div class="card-image">
              <img src="imgs/tomcat.jpg">
            </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>
            <div class="card-action">
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
      </div>
            

Card Reveal

Card Titlemore_vert

This is a link

Card Titleclose

Here is some more information about this product that is only revealed once clicked on.





Here you can add a card that reveals more information once clicked. Just add the card-reveal div with a span.card-title inside to make this work. Add the class activator to an element inside the card to allow it to open the card reveal.



  <div class="card">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="imgs/lime2-splosh_m.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></span>
      <p>Here is some more information about this product that is only revealed once clicked on.</p>
    </div>
  </div>
            

Card Titlemore_vert

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Card Titleclose

Here is some more information about this product that is only revealed once clicked on.



"Sticky action"

You can make your card-action always visible by adding the class sticky-action to the overall card.



  <div class="card sticky-action">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="imgs/lime2-splosh_m.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>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    </div>
    <div class="card-action">
      <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></span>
      <p>Here is some more information about this product that is only revealed once clicked on.</p>
    </div>
  </div>
            

Tabs in Cards

You can add tabs to your cards by adding a dividing cards-tabs div inbetween your header content and your tab content.

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.

Tab 1 content
Tab 2 content
Tab 3 content

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.

Tab 1 content
Tab 2 content
Tab 3 content


      <div class="row">
        <div class="col s12 m6">
          <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="#test1a">Tab 1</a></li>
                  <li class="tab"><a class="active" href="#test2a">Tab 2</a></li>
                  <li class="tab"><a href="#test3a">Tab 3</a></li>
                </ul>
              </div>
              <div class="card-content grey lighten-4">
                <div id="test1a">Tab 1 content</div>
                <div id="test2a">Tab 2 content</div>
                <div id="test3a">Tab 3 content</div>
              </div>
          </div>
        </div>
      </div>
            

Card Sizes

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.


  <div class="card small">
    <!-- Card Content -->
  </div>
            
Small
Card Title

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.



The Small Card limits the height of the card to 300px.

Medium
Card Title

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.



The Medium Card limits the height of the card to 400px.

Large
Card Title

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.



The Large Card limits the height of the card to 500px.

Card Panel

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.




For a simpler card with less markup, try using a card panel which just has padding and a shadow effect



    <div class="row">
      <div class="col s12 m5">
        <div class="card-panel primary-color">
          <span>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>
            

For more detailed informations please visit: http://materializecss.com/cards.html