Elevation


To explain the elevation concept, let me quote from the official Material Design documentation:

Elevation in Material Design is measured as the distance between Material surfaces. The distance from the front of one Material surface to the front of another is measured along the z-axis in density-independent pixels (dps) and depicted (by default) using shadows.
  1. One surface at 1dp elevation and another surface at 8dp elevation, as viewed from the front
  2. The difference in elevation between the two surfaces is 7dp, as viewed from the side

Let's use the above knowledge and create a new Testimonials section in our project.

Step 1 - add a new Testimonials section

Add a new, empty Testimonials section, with a 3-column grid inside:

        
            
  
        <!-- Section: Testimonials -->
        <section class="mb-10 text-center">

          <h2 class="fw-bold mb-7 text-center">Happy clients</h2>

          <div class="row gx-lg-5">
  
            <!-- First column -->
            <div class="col-lg-4 mb-5 mb-lg-0">
              
            </div>
            <!-- First column -->
  
            <!-- Second column -->
            <div class="col-lg-4 mb-5 mb-lg-0">
              
            </div>
            <!-- Second column -->
  
            <!-- Third column -->
            <div class="col-lg-4">
              
            </div>
            <!-- Third column -->
  
          </div>
        </section>
        <!-- Section: Testimonials -->
  
      
        
    
Step 2 - add testimonials

Add a testimonial to each column.

There's nothing here that we haven't covered in previous lessons, so I won't dwell on it.

        
            

      <!-- Section: Testimonials -->
      <section class="mb-10 text-center">

        <h2 class="fw-bold mb-7 text-center">Happy clients</h2>

        <div class="row gx-lg-5">

          <!-- First column -->
          <div class="col-lg-4 mb-5 mb-lg-0">

            <div>
              <div class="rounded-7 p-4" style="background-color: hsl(218, 62.2%, 95%)">
                <p class="text-muted mt-4 mb-2">Project Manager at Spotify</p>
                <p class="h5 mb-4 text-primary">Garry Lindman</p>
                <p class="pb-4 mb-4">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis molestias quidem
                  itaque earum tempora distinctio soluta ut, eius, impedit porro iure praesentium
                  ratione possimus quos suscipit, ratione nostrum cum odit.
                </p>
              </div>
              <img src="https://mdbootstrap.com/img/new/avatars/22.jpg" class="w-100 rounded-7 mt-n5"
                style="max-width: 100px" alt="Avatar" />
            </div>

          </div>
          <!-- First column -->

          <!-- Second column -->
          <div class="col-lg-4 mb-5 mb-lg-0">

            <div>
              <div class="rounded-7 p-4" style="background-color: hsl(218, 62.2%, 95%)">
                <p class="text-muted mt-4 mb-2">CEO at Reddit</p>
                <p class="h5 mb-4 text-primary">Lisa Montessori</p>
                <p class="pb-4 mb-4">
                  Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum
                  soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
                  placeat facere possimus, omnis voluptas assumenda est omnis.
                </p>
              </div>
              <img src="https://mdbootstrap.com/img/new/avatars/11.jpg" class="w-100 rounded-7 mt-n5"
                style="max-width: 100px" alt="Avatar" />
            </div>

          </div>
          <!-- Second column -->

          <!-- Third column -->
          <div class="col-lg-4">

            <div>
              <div class="rounded-7 p-4" style="background-color: hsl(218, 62.2%, 95%)">
                <p class="text-muted mt-4 mb-2">Senior Product Designer at Twitter</p>
                <p class="h5 mb-4 text-primary">Ozzy McRyan</p>
                <p class="pb-4 mb-4">
                  Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
                  eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
                  earum rerum hic tenetur a sapiente delectus ut aut reiciendis.
                </p>
              </div>
              <img src="https://mdbootstrap.com/img/new/avatars/25.jpg" class="w-100 rounded-7 mt-n5"
                style="max-width: 100px" alt="Avatar" />
            </div>

          </div>
          <!-- Third column -->

        </div>
      </section>
      <!-- Section: Testimonials -->

    
        
    
Step 3 - add elevation

To ensure the correct elevation, we must first determine which element of our testimonial card will be closer to the surface and which will be further away.

CEO at Reddit

Lisa Montessori

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est omnis.

Avatar

Since this image overlaps the blue card, it will be the one that will be farther from the surface. So, according to the theory of elevation and the laws of physics, the shadow of the photo will be more dispersed and farther from the element that casts it (i.e. the photo), and the shadow of the card will be smaller and more dense.

CEO at Reddit

Lisa Montessori

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est omnis.

Avatar

In the previous tutorial, we already learned about shadows in the MDB, so you know how to add and modify them.

In the current case, we can add a medium-level regular shadow to the card using the shadow-3 class, and a stronger and more diffused shadow to the photo using the shadow-5-strong class:

        
            

    <div>
      <div class="shadow-3 rounded-7 p-4" style="background-color: hsl(218, 62.2%, 95%)">
        <p class="text-muted mt-4 mb-2">CEO at Reddit</p>
        <p class="h5 mb-4 text-primary">Lisa Montessori</p>
        <p class="pb-4 mb-4">
          Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum
          soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
          placeat facere possimus, omnis voluptas assumenda est omnis.
        </p>
      </div>
      <img src="https://mdbootstrap.com/img/new/avatars/11.jpg" class="shadow-5-strong w-100 rounded-7 mt-n5"
        style="max-width: 100px" alt="Avatar" />
    </div>

    
        
    
Step 4 - add shadows to the rest of the testimonials

Now that we know what to do to achieve the desired effect, all we have to do is add shadows to the rest of the testimonials:

        
            

      <!-- Section: Testimonials -->
      <section class="mb-10 text-center">

        <h2 class="fw-bold mb-7 text-center">Happy clients</h2>

        <div class="row gx-lg-5">

          <!-- First column -->
          <div class="col-lg-4 mb-5 mb-lg-0">

            <div>
              <div class="rounded-7 p-4 shadow-3" style="background-color: hsl(218, 62.2%, 95%)">
                <p class="text-muted mt-4 mb-2">Project Manager at Spotify</p>
                <p class="h5 mb-4 text-primary">Garry Lindman</p>
                <p class="pb-4 mb-4">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis molestias quidem
                  itaque earum tempora distinctio soluta ut, eius, impedit porro iure praesentium
                  ratione possimus quos suscipit, ratione nostrum cum odit.
                </p>
              </div>
              <img src="https://mdbootstrap.com/img/new/avatars/22.jpg" class="w-100 rounded-7 mt-n5 shadow-5-strong"
                style="max-width: 100px" alt="Avatar" />
            </div>

          </div>
          <!-- First column -->

          <!-- Second column -->
          <div class="col-lg-4 mb-5 mb-lg-0">

            <div>
              <div class="rounded-7 p-4 shadow-3" style="background-color: hsl(218, 62.2%, 95%)">
                <p class="text-muted mt-4 mb-2">CEO at Reddit</p>
                <p class="h5 mb-4 text-primary">Lisa Montessori</p>
                <p class="pb-4 mb-4">
                  Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum
                  soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
                  placeat facere possimus, omnis voluptas assumenda est omnis.
                </p>
              </div>
              <img src="https://mdbootstrap.com/img/new/avatars/11.jpg" class="w-100 rounded-7 mt-n5 shadow-5-strong"
                style="max-width: 100px" alt="Avatar" />
            </div>

          </div>
          <!-- Second column -->

          <!-- Third column -->
          <div class="col-lg-4">

            <div>
              <div class="rounded-7 p-4 shadow-3" style="background-color: hsl(218, 62.2%, 95%)">
                <p class="text-muted mt-4 mb-2">Senior Product Designer at Twitter</p>
                <p class="h5 mb-4 text-primary">Ozzy McRyan</p>
                <p class="pb-4 mb-4">
                  Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
                  eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
                  earum rerum hic tenetur a sapiente delectus ut aut reiciendis.
                </p>
              </div>
              <img src="https://mdbootstrap.com/img/new/avatars/25.jpg" class="w-100 rounded-7 mt-n5 shadow-5-strong"
                style="max-width: 100px" alt="Avatar" />
            </div>

          </div>
          <!-- Third column -->

        </div>
      </section>
      <!-- Section: Testimonials -->

    
        
    


John Doe

About author

Michal Szymanski

Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.