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="https://veterans.ucr.edu/sites/default/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>