NOTE: SET BACKGROUND COLOR & PADDING

<div class="grid-container">
<div class="grid-x grid-margin-x grid-margin-y">
<div class="large-5 small-12">
<p style="text-align:center"><img alt="UCR Student Veteran: Jennifer Sayre" class="img-circle" src="http://veterans.ucr.acsitefactory.com/sites/g/files/rcwecm3536/files/UCR_Veterans_Jennifer-Sayre.jpg" width="300px" /></p>
</div>

<div class="cell small-12 large-7">
<div style="display: table; height: 100%; #position: relative; overflow: hidden;">
<div style="#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div style="#position: relative; #top: -50%">
<h5><span style="color:#cecece;">“I am so grateful for the VRC — it's become my home on campus. It's nice to have a place to hang out or study in between classes. Plus, I've learned so much about my benefits and the campus through the workshops they host.”</span></h5>

<p><span style="color:#ffffff;">Jennifer Sayre<br />
U.S. Army Veteran<br />
History and Education Majors</span></p>
</div>
</div>
</div>
</div>
</div>
</div>

CSS FOR IMG-CIRCLE

.img-circle {
border-radius: 50%;
}

<span data-tooltip aria-haspopup="true" class="has-tip" title="Tooltips are awesome, you should totally use them!">Hover on desktop or touch me on mobile.</span>

<style type="text/css">.tooltip { max-width: 100%; }
</style>

<ul class="list-arrow-alt">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

<div class="media-object"> <div class="media-object-section"> <div class="thumbnail"><img alt="" src="https://placehold.it/150x150" /></div> </div> <div class="media-object-section"> <h4>Dreams feel real while we're in them.</h4> <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you. So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head?</p> </div> </div>

 MUST ADD LINK ICON REMOVER FIRST!! 

<div class="text-align-center" style="background-color: #FF871E; padding: 25px 25px 25px 25px">
<h2><strong><span style="color:#ffffff;">be well</span></strong></h2>

<h6><a href="http://studentwellness.ucr.edu" style="text-decoration: none !important; color:#FF871E; display: inline-flex;" target="_blank"><span style="color:#ffffff;">STUDENT HEALTH AND<br />
WELLNESS SERVICES</span></a></h6>
</div>

<div class="text-align-center" style="background-color: #1CA6DF; padding: 10px 10px 10px 10px"><a href="https://casemanagement.ucr.edu" style="text-decoration: none !important; color:#1CA6DF; display: inline-flex;" target="_blank"><span style="color:#ffffff;">Case Management</span></a></div>

<div class="text-align-center" style="background-color: #1B75BB; padding: 10px 10px 10px 10px"><a href="http://counseling.ucr.edu/" style="text-decoration: none !important; color:#1B75BB; display: inline-flex;" target="_blank"><span style="color:#ffffff;">Counseling &amp; Psychological Services</span></a></div>

<div class="text-align-center" style="background-color: #1CA6DF; padding: 10px 10px 10px 10px"><a href="http://recreation.ucr.edu/" style="text-decoration: none !important; color:#1CA6DF; display: inline-flex;" target="_blank"><span style="color:#ffffff;">Recreation</span></a></div>

<div class="text-align-center" style="background-color: #1B75BB; padding: 10px 10px 10px 10px"><a href="http://studenthealth.ucr.edu/" style="text-decoration: none !important; color:#1B75BB; display: inline-flex;" target="_blank"><span style="color:#ffffff;">Student Health Services</span></a></div>

<div class="text-align-center" style="background-color: #1CA6DF; padding: 10px 10px 10px 10px"><a href="http://sdrc.ucr.edu" style="text-decoration: none !important; color:#1CA6DF; display: inline-flex;" target="_blank"><span style="color:#ffffff;">Student Disability Resource Center</span></a></div>

<div class="text-align-center" style="background-color: #1B75BB; padding: 10px 10px 10px 10px"><a href="http://well.ucr.edu/" style="text-decoration: none !important; color:#1B75BB; display: inline-flex;" target="_blank"><span style="color:#ffffff;">The Well</span></a></div>

/*JAVASCRIPT*/
<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

/*CSS*/
<style type="text/css">

#more {display: none;}

#myBtn {
    color: #D6336C;
    text-decoration: underline;
    cursor: pointer;
}
</style>

/*HTML*/
<p>This will be the text that will show<span id="dots">...</span><span id="more"> This will be the text that will expand</span></p>
<button alt="ENTER CUSTOM ALT TAG" id="myBtn" onclick="myFunction()" title="ENTER CUSTOM TITLE TAG">Read more</button>