<!-- 
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
    Responsive UI profile card
    Made with HTML, CSS and jQuery
    You are free to do whatever you
    like to do with this. If you fork
    and improve this, please let me
    know so I can learn from it.
    Enjoy!

    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

    this works due to a simple checkbox that's being activated by clicking on its label. The checkbox itself is positioned out of screen and the label contains just an equals sign, resembling a menu button.

    %%%%%%%%%%%%%%%%%%%%%%%%%%%% -->
<div class="profile">
  <figure>
    <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/55758/random-user-31.jpg" alt="" />
  </figure>
  <header>
    <h1>Maria Gonzalez
      <small>Client Happiness Manager</small></h1>
  </header>
  
  <div class="toggle">
    <input type="checkbox" class="view_details" id="view_details">
    <label for="view_details" title="tap here to view full profile">☰</label>    
  </div>
  <main>
    <dl>
      <dt>Full name</dt>
        <dd>Maria Josephina Gonzalez</dd>
      <dt>Date of birth</dt>
        <dd>August 27, 1987</dd>
      <dt>Hometown</dt>
        <dd>Barcelona, Spain</dd>
      <dt>Occupation</dt>
        <dd>Client Happiness Manager</dd>
      <dt>Loves</dt>
        <dd>Skydiving, Tennis, Romantic dinners</dd>
      <dt>Hates</dt>
        <dd>Taxes, bosses instead of leaders</dd>
      <dt>Social</dt>
        <dd>
          <a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a> 
          <a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
        </dd>
    </dl>
  </main>

</div> <!-- end profile -->

<p style="padding: 20px;">Use this for whatever you like. Have fun with it!</p>
$base-text-color: #151515;
$base-link-color: #1daaff;
$base-hover-color: darken($base-link-color, 20);

$profile-card-size: 500px;
$profile-avatar-size: 150px;
* {box-sizing: border-box;}
html, body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  user-select: none;
}

/* 
  some styling for display on codepen,
  you can safely remove this when you
  want to use this module somewhere else 
*/
.codepen {
  margin: 2em auto;
  h1 {
    color: lighten($base-text-color, 20);
    font-weight: 100;
  }
  a {
    color: $base-link-color;
    &:hover {
      color: $base-hover-color;
    }
  }
}

.profile {
  @extend .codepen;
  max-width: $profile-card-size;
  border: 1px solid lighten($base-text-color, 80);
  border-radius: 20px;
  padding: 2em;
  margin: 1em;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  position: relative;
  
  figure {
    margin: 0;
    img {
      max-width: $profile-avatar-size;
      max-height: $profile-avatar-size;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0px 0px 20px rgba($base-text-color, .15);
    }
  } // end figure
  
  header {
    h1 {
      margin: 0;
      padding: 0;
      line-height: 1;
      small {
        display: block;
        clear: both;
        font-size: 18px;
        opacity: 0.6;
        
      }
    }
  } // end header
    
  main {
    display: none;

    dl {
      display: block;
      width: 100%;
      dt,
      dd {
        float: left;
        padding: 8px 5px;
        margin: 0;
        border-bottom: 1px solid lighten($base-text-color, 80);
        a {
          padding-right: 5px;
        }
      }
      dt {
        width: 30%;
        padding-right: 10px;
        font-weight: bold;
        &:after {
          content: ":"
        }
      }
      dd {
        width: 70%;
      }
    }
  }

  .toggle {
    position: absolute;
    background: #fff;
    top: 30px;
    left: 30px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    text-align: center;
    z-index: 20;
    vertical-align: middle;
    box-shadow: 0px 0px 10px rgba($base-text-color, .15);
    cursor: pointer;
    border-radius: 20px;
    user-select: none;
    transition: box-shadow 300ms ease;
    &:hover {
      box-shadow: 0px 0px 10px rgba($base-text-color, .25);
    }
    main {
      font-size: 16px;
    }
  }
}
.view_details {position: absolute; top: -5000px; left: -5000px;}
label {display: block; cursor: pointer;}

@media screen and (max-width: 520px) {
  .profile {
    padding: 1em;
    margin: 1em;
  }
  .profile img {
    max-width: 100%;
    height: auto;
  }
  .profile main dl,
  .profile main dl dt,
  .profile main dl dd {
    display: block;
    width: 100%;
    float: none;
  }
  .profile main dl dt {
    border-bottom: none;
  }
  .profile main dl dd {
    margin-bottom: 10px;
  }

  .profile .toggle {
    top: 15px;
    left: 15px;
  }
}
View Compiled
$(function() {
  $('.view_details').click(function() {
    if ($(this).is(':checked')) {
      $(this)
        .next('label')
        .html('&times;')
        .attr('title', 'tap here to close full profile');
      $(this)
        .parent()
        .next('main')
        .slideDown('normal');
    } else {
      $(this)
        .next('label')
        .html('☰')
        .attr('title', 'tap here to view full profile');
      $(this)
        .parent()
        .next('main')
        .slideUp('fast');
    }
  });
});

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans:400,700
  2. //maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js