CodePen Embed - Material Card

<div class="center">
  <div class="card md-elevation-z2">
    <img class="image-big" src="https://images.unsplash.com/photo-1533787896899-91b040188f57?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=aebf11a22dc7c7a52794bb8a15749071&auto=format&fit=crop&w=1320&q=80"/>
    <div class="content clearfix">
       <div class="avatar"></div>
        <div class="meta">
          <div class="title">John Smith</div>
          <div class="subtitle">Front-End Webdeveloper</div>
       </div>
       <a class="down-icon material-icons toggle">
         keyboard_arrow_down
      </a>
    </div>
    <div class="expandable_content">
      <div class="item">
        <div class="material-icons">
          call
        </div>
        <div class="meta">
          <div class="title">0172 12345678</div>
          <div class="subtitle">Mobile</div>
       </div>
    </div>
      <div class="item">
        <div class="material-icons">
          email
        </div>
        <div class="meta">
          <div class="title">john@smith.de</div>
          <div class="subtitle">Work</div>
       </div>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
  font-family: 'Roboto', sans-serif;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding: 16px;
}

.toggle {
  cursor: pointer;
  transform: translateY(-50%) scaleY(1);
  transition: all .2s cubic-bezier(0.4, 0.0, 0.2,1);
}

.toggle.active {
  cursor: pointer;
  transform: translateY(-50%) scaleY(-1);
  transition: all .2.5s cubic-bezier(0.4, 0.0, 0.2,1);
}


.card {
  width: 344px;
  height: auto;
  
  border-radius: .3rem;
  
  .image-big {
    width: 100%;
  }
  
  .expandable_content.active {
    max-height: 147px;
    transition: max-height .2.5s cubic-bezier(0.4, 0.0, 0.2,1);
  }
  
  .expandable_content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s cubic-bezier(0.4, 0.0, 0.2,1);
  }
  
  .content {
    padding: 16px;
    display: flex;
    position: relative;
    flex-direction: row;
    
    .meta {
      padding-left: 16px;
      width: auto;
      
      .title {
      font-weight: bold;
      color: #252525;
      line-height: 24px;
    }
    
    .subtitle {
      color: #969696;
      font-size: 80%;
    }
    }
    
    .avatar {
      background-color: teal;
      border-radius: 40px;
      height: 40px;
      width: 40px;
    }
    
    .down-icon {
      position: absolute;
      top: 50%;
      right: 16px;
      color: #666566;
    }

  }
}

.item {
    padding: 16px;
    display: flex;
    position: relative;
    flex-direction: row;
  
    .material-icons {
      text-align: center;
      height: 40px;
      width: 40px;
      color: #747274;
      vertical-align: middle;
      line-height: 40px;
    }

    .meta {
      width: auto;
      
      .title {
      color: #252525;
      font-size: 90%;
      line-height: 24px;
    }
    
    .subtitle {
      color: #969696;
      font-size: 80%;
    }
    }
  }

// CSS - ELEVATION

/**
 * Shadow colors.
 * http://codepen.io/shyndman/pen/ojxmdY
 */
/**
 * The hand-designed reference shadow sets.
 * Source: http://codepen.io/shyndman/pen/ojxmdY
 */
/**
 * Animation durations.
 */
/**
 * Material Design element elevations
 * Source: https://material.google.com/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 */
/**
* Returns the two reference shadows whose elevations bound the specified
* elevation. In the case where the supplied elevation exceeds the maximum
* reference elevation, the last two reference shadows are returned.
*/
/**
 * Performs linear interpolation between values a and b. Returns the value
 * between a and b proportional to x (when x is between 0 and 1. When x is
 * outside this range, the return value is a linear extrapolation).
 */
/**
 * Performs linear interpolation between shadows by interpolating each property
 * individually. Returns the value between shadow1 and shadow2 proportional to x
 * (when x is between 0 and 1. When x is outside this range, the return value is
 * a linear extrapolation).
 */
/**
 * Calculates the set of shadows at a given elevation.
 */
/**
 * Generates box-shadow and the transition for a given elevation
 * A single elevation will generate a single box-shadow set
 * Two elevations and a state will generate a default box-shadow set
 * and another set that is activated by the state
 * tested with :hover and :active
 */
/**
 * Generates the transition for a change between 2 elevations
 * The larger the elevation change the longer the animation takes
 */
/**
* Returns box-shadow and transition properties for Material Design elements
*/
/**
* CSS md-elevation-z# classes
*/
.md-elevation-z0 {
  box-shadow: none !important; }

.md-elevation-z1 {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); }

.md-elevation-z2 {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); }

.md-elevation-z3 {
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); }

.md-elevation-z4 {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); }

.md-elevation-z5 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12); }

.md-elevation-z6 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); }

.md-elevation-z7 {
  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12); }

.md-elevation-z8 {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }

.md-elevation-z9 {
  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12); }

.md-elevation-z10 {
  box-shadow: 0px 6px 6px -4px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12); }

.md-elevation-z11 {
  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12); }

.md-elevation-z12 {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); }

.md-elevation-z13 {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12); }

.md-elevation-z14 {
  box-shadow: 0px 7px 9px -5px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12); }

.md-elevation-z15 {
  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12); }

.md-elevation-z16 {
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); }

.md-elevation-z17 {
  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12); }

.md-elevation-z18 {
  box-shadow: 0px 9px 11px -6px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12); }

.md-elevation-z19 {
  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12); }

.md-elevation-z20 {
  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12); }

.md-elevation-z21 {
  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12); }

.md-elevation-z22 {
  box-shadow: 0px 10px 14px -7px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12); }

.md-elevation-z23 {
  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12); }

.md-elevation-z24 {
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); }

/**
* CSS transistion class
*/
md-elevation-transition {
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); }

/**
* CSS classes for Material Design elements
*/
.md-elevation-dialog {
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); }

.md-elevation-picker {
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); }

.md-elevation-nav-drawer {
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); }

.md-elevation-right-drawer {
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); }

.md-elevation-bottom-sheet {
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); }

.md-elevation-fab {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  transition: box-shadow 250msms cubic-bezier(0.4, 0, 0.2, 1); }
  .md-elevation-fab:active {
    box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); }

.md-elevation-sub-menu-3 {
  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12); }

.md-elevation-sub-menu-2 {
  box-shadow: 0px 6px 6px -4px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12); }

.md-elevation-sub-menu-1 {
  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12); }

.md-elevation-menu {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }

.md-elevation-bottom-nav-bar {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }

.md-elevation-card {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  transition: box-shadow 250msms cubic-bezier(0.4, 0, 0.2, 1); }
  .md-elevation-card:hover {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }

.md-elevation-raised-button {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  transition: box-shadow 250msms cubic-bezier(0.4, 0, 0.2, 1); }
  .md-elevation-raised-button:active {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }

.md-elevation-snackbar {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); }

.md-elevation-app-bar {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); }

.md-elevation-refresh-indicator {
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); }

.md-elevation-quick-entry {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  transition: box-shadow 250msms cubic-bezier(0.4, 0, 0.2, 1); }
  .md-elevation-quick-entry:active {
    box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); }

.md-elevation-search-bar {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  transition: box-shadow 250msms cubic-bezier(0.4, 0, 0.2, 1); }
  .md-elevation-search-bar:active {
    box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); }

.md-elevation-switch {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); }

View Compiled

$(document).ready(function() {
  $(".toggle").click(function() {
    console.log("clicked");
    $(".expandable_content").toggleClass("active");
    $(".toggle").toggleClass("active");
  });
});

This Pen is owned by Jonah Wichtrup on CodePen.

See more by @ScriptKing on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js