Shadows

<h2 class="label">Various Shadow Heights</h2>

<p>Various Levels of "height" applied to shadows</p>
<div class="flex-row flex-tiles flex-tile-grout">
    <div class="flex-column square10 csu-grey shadow-1"></div>
    <div class="flex-column square10 csu-grey shadow-2"></div>
    <div class="flex-column square10 csu-grey shadow-3"></div>
    <div class="flex-column square10 csu-grey shadow-4"></div>
    <div class="flex-column square10 csu-grey shadow-5"></div>
</div>
<h2 class="label">{{ modifier}}</h2>

<p>Various Levels of "height" applied to shadows</p>
<div class="flex-row flex-tiles flex-tile-grout">
  <div class="flex-column square10 csu-grey {{ sh1 }}"></div>
  <div class="flex-column square10 csu-grey {{ sh2 }}"></div>
  <div class="flex-column square10 csu-grey {{ sh3 }}"></div>
  <div class="flex-column square10 csu-grey {{ sh4 }}"></div>
  <div class="flex-column square10 csu-grey {{ sh5 }}"></div>
</div>

The Learning Materials styles utilise Google’s Material Design concept of depth for items on the page. Some elements already use shadows but they can be applied using the various classes.