<div class="container">
  <div class="row">

    <div class="col s12 m8 offset-m1 xl7 offset-xl1">

  <!-- 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>
        <h3 class="header">Basic Card</h3>
        <div class="row">
          <div class="col s12 m8">
            <!-- 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">
  &lt;div class="row">
    &lt;div class="col s12 m6">
      &lt;div class="card blue-grey darken-1">
        &lt;div class="card-content white-text">
          &lt;span class="card-title">Card Title&lt;/span>
          &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>
        &lt;/div>
        &lt;div class="card-action">
          &lt;a href="#">This is a link&lt;/a>
          &lt;a href="#">This is a link&lt;/a>
        &lt;/div>
      &lt;/div>
    &lt;/div>
  &lt;/div>
            </code></pre>
            <br>
          </div>
        </div>
      </div>

      <div id="image" class="section scrollspy">
        <div class="row">
          <!-- Image Card -->
          <div class="col s12 m7">
           <h3 class="header">Image Card</h3>
            <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">
  &lt;div class="row">
    &lt;div class="col s12 m7">
      &lt;div class="card">
        &lt;div class="card-image">
          &lt;img src="images/sample-1.jpg">
          &lt;span class="card-title">Card Title&lt;/span>
        &lt;/div>
        &lt;div class="card-content">
          &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>
        &lt;/div>
        &lt;div class="card-action">
          &lt;a href="#">This is a link&lt;/a>
        &lt;/div>
      &lt;/div>
    &lt;/div>
  &lt;/div>
            </code></pre>
            <br>
          </div>
        </div>
      </div>

      <div id="fab" class="section scrollspy">
        <div class="row">
          <!-- Image Card -->
          <div class="col s12 m7">
            <h3 class="header">FABs in Cards</h3>
            <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">
  &lt;div class="row">
    &lt;div class="col s12 m6">
      &lt;div class="card">
        &lt;div class="card-image">
          &lt;img src="images/sample-1.jpg">
          &lt;span class="card-title">Card Title&lt;/span>
          &lt;a class="btn-floating halfway-fab waves-effect waves-light red">&lt;i class="material-icons">add&lt;/i>&lt;/a>
        &lt;/div>
        &lt;div class="card-content">
          &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>
        &lt;/div>
      &lt;/div>
    &lt;/div>
  &lt;/div>
            </code></pre>
            <br>
          </div>
        </div>
      </div>

      <div id="horizontal" class="section scrollspy">
        <div class="row">
          <!-- Horizontal Card -->
          <div class="col s12 m7">
            <h3 class="header">Horizontal Card</h3>
            <div class="card horizontal">
              <div class="card-image">
                <img src="https://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">
  &lt;div class="col s12 m7">
    &lt;h2 class="header">Horizontal Card&lt;/h2>
    &lt;div class="card horizontal">
      &lt;div class="card-image">
        &lt;img src="https://lorempixel.com/100/190/nature/6">
      &lt;/div>
      &lt;div class="card-stacked">
        &lt;div class="card-content">
          &lt;p>I am a very simple card. I am good at containing small bits of information.&lt;/p>
        &lt;/div>
        &lt;div class="card-action">
          &lt;a href="#">This is a link&lt;/a>
        &lt;/div>
      &lt;/div>
    &lt;/div>
  &lt;/div>
            </code></pre>
            <br>
          </div>
        </div>
      </div>

      <div id="reveal" class="section scrollspy">
        <div class="row">
          <!-- Pullup Card -->
          <div class="col s12 m7">
            <h3 class="header">Card Reveal</h3>
            <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">
  &lt;div class="card">
    &lt;div class="card-image waves-effect waves-block waves-light">
      &lt;img class="activator" src="images/office.jpg">
    &lt;/div>
    &lt;div class="card-content">
      &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>
      &lt;p>&lt;a href="#">This is a link&lt;/a>&lt;/p>
    &lt;/div>
    &lt;div class="card-reveal">
      &lt;span class="card-title grey-text text-darken-4">Card Title&lt;i class="material-icons right">close</i>&lt;/i>&lt;/span>
      &lt;p>Here is some more information about this product that is only revealed once clicked on.&lt;/p>
    &lt;/div>
  &lt;/div>
            </code></pre>
          </div>
        </div>
        <div class="row">
          <div class="col s12 m6">
            <h5>Card Action Options</h5>
            <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">
  &lt;div class="card sticky-action">
    ...

    &lt;div class="card-action">...&lt;/div>

    &lt;div class="card-reveal">...&lt;/div>
  &lt;/div>
            </code></pre>
          </div>
        </div>
      </div>


      <div id="tabs" class="section scrollspy">
        <div class="row">
          <!-- Small Card -->
          <div class="col s12">
            <h3 class="header">Tabs in Cards</h3>
            <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">
  &lt;div class="card">
    &lt;div class="card-content">
      &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>
    &lt;/div>
    &lt;div class="card-tabs">
      &lt;ul class="tabs tabs-fixed-width">
        &lt;li class="tab">&lt;a href="#test4">Test 1&lt;/a>&lt;/li>
        &lt;li class="tab">&lt;a class="active" href="#test5">Test 2&lt;/a>&lt;/li>
        &lt;li class="tab">&lt;a href="#test6">Test 3&lt;/a>&lt;/li>
      &lt;/ul>
    &lt;/div>
    &lt;div class="card-content grey lighten-4">
      &lt;div id="test4">Test 1&lt;/div>
      &lt;div id="test5">Test 2&lt;/div>
      &lt;div id="test6">Test 3&lt;/div>
    &lt;/div>
  &lt;/div></code></pre>
          </div>
        </div>
        <div class="row">
          <div class="col s12 m6">
            <h5>White</h5>
            <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">
            <h5>Colored</h5>
            <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">
          <!-- Small Card -->
          <div class="col s12">
            <h3 class="header">Card Sizes</h3>
            <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">
  &lt;div class="card small">
    &lt;!-- Card Content -->
  &lt;/div>
            </code></pre>
          </div>
        </div>
        <div class="row">
          <div class="col s12 m6">
            <h5>Small</h5>
            <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">
            <h5>Medium</h5>
            <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">
            <h5>Large</h5>
            <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">
            <h3 class="header">Card Panel</h3>
            <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">
  &lt;div class="row">
    &lt;div class="col s12 m5">
      &lt;div class="card-panel teal">
        &lt;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.
        &lt;/span>
      &lt;/div>
    &lt;/div>
  &lt;/div>
            </code></pre>
          </div>
        </div>
      </div>


    </div>

    <div class="col hide-on-small-only m3 xl3 offset-xl1">
      <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?serve=CKYIK27J&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>

