materialize-css/jade/page-contents/shadow_content.html

Builds Materialize distribution packages

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

    <div class="col s12 m9 l10">

      <div id="shadow" class="section scrollspy">
        <p class="caption">In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.</p>
        <p>You can easily apply this shadow effect by adding a <code class="language-markup">class="z-depth-2"</code> to an HTML tag. Alternatively you can extend any of these shadows with Sass using <code class="language-scss">@extend .z-depth-2</code>. A <code class="language-scss">z-depth-0</code> can be used to remove shadows from elements that have z-depths by default. </p>
        <div class="row">
          <div class="col s12 m4 l2">
            <p class="z-depth-0 shadow-demo"></p>
          </div>
          <div class="col s12 m4 l2">
            <p class="z-depth-1 shadow-demo"></p>
          </div>
          <div class="col s12 m4 l2">
            <p class="z-depth-2 shadow-demo"></p>
          </div>
          <div class="col s12 m4 l2">
            <p class="z-depth-3 shadow-demo"></p>
          </div>
          <div class="col s12 m4 l2">
            <p class="z-depth-4 shadow-demo"></p>
          </div>
          <div class="col s12 m4 l2">
            <p class="z-depth-5 shadow-demo"></p>
          </div>
        </div>
        <pre><code class="language-markup col s12">
    &lt;div class="col s12 m2">
      &lt;p class="z-depth-1">z-depth-1&lt;/p>
    &lt;/div>
    &lt;div class="col s12 m2">
      &lt;p class="z-depth-2">z-depth-2&lt;/p>
    &lt;/div>
    &lt;div class="col s12 m2">
      &lt;p class="z-depth-3">z-depth-3&lt;/p>
    &lt;/div>
    &lt;div class="col s12 m2">
      &lt;p class="z-depth-4">z-depth-4&lt;/p>
    &lt;/div>
    &lt;div class="col s12 m2">
      &lt;p class="z-depth-5">z-depth-5&lt;/p>
    &lt;/div>
        </code></pre>
      </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="#shadow">Shadows</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>