Steps, Image Rows and Columns

Steps

---

<div class="row" style="display: flex;">
<div class="small-12 medium-3 columns tealbg-pale v1bottom">
<h6 class="size-48 lh-14 sans"><strong>1</strong></h6>
<h4>Apply online using Apply BC</h4>
</div>
<div class="small-12 medium-9 columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a erat sem. Donec sed blandit urna. Aliquam pellentesque sagittis tristique. Praesent vel risus ut sapien mollis tincidunt sed eget purus. Suspendisse rutrum, nibh tempor consectetur tincidunt, augue tellus semper turpis, at interdum justo justo in elit. Vestibulum ullamcorper tempor sagittis.</p>
<a href="#" class="button tealbg radius nomargin">Register</a>
</div>
</div>
<hr>
<div class="row" style="display: flex;">
<div class="small-12 medium-3 columns tealbg-pale v1bottom">
<h6 class="size-48 lh-14 sans"><strong>2</strong></h6>
<h4>Complete TRU's Application for Admission</h4>
</div>
<div class="small-12 medium-9 columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a erat sem. Donec sed blandit urna. Aliquam pellentesque sagittis tristique. Praesent vel risus ut sapien mollis tincidunt sed eget purus. Suspendisse rutrum, nibh tempor consectetur tincidunt, augue tellus semper turpis, at interdum justo justo in elit. Vestibulum ullamcorper tempor sagittis.</p>
<a href="#" class="button tealbg radius nomargin">Download the Application</a>
</div>
</div>

---

<div class="row">
<h2>3 columns</h2>
<div class="small-12 medium-4 columns">
<h4><a href="#" class="light-blue-header">Consectetur adipiscing elit nibh massa</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nibh massa.</p>
</div>
<div class="small-12 medium-4 columns">
<h4><a href="#" class="light-blue-header">Consectetur adipiscing elit nibh massa</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nibh massa.</p>
</div>
<div class="small-12 medium-4 columns">
<h4><a href="#" class="light-blue-header">Consectetur adipiscing elit nibh massa</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nibh massa.</p>
</div>
</div>

---

<div class="row">
<h2>2 columns</h2>
<div class="small-12 medium-6 columns">
<h4><a href="#" class="light-blue-header">Consectetur adipiscing elit nibh massa</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nibh massa.</p>
</div>
<div class="small-12 medium-6 columns">
<h4><a href="#" class="light-blue-header">Consectetur adipiscing elit nibh massa</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nibh massa.</p>
</div>
</div>

---

<div class="row">
<h2>4 columns</h2>
<div class="small-12 medium-3 columns">
<h4><a href="#" class="light-blue-header">Consectetur adipiscing elit nibh massa</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nibh massa.</p>
</div>
<div class="small-12 medium-3 columns">
<h4><a href="#" class="light-blue-header">Consectetur adipiscing elit nibh massa</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nibh massa.</p>
</div>
<div class="small-12 medium-3 columns">
<h4><a href="#" class="light-blue-header">Consectetur adipiscing elit nibh massa</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nibh massa.</p>
</div>
<div class="small-12 medium-3 columns">
<h4><a href="#" class="light-blue-header">Consectetur adipiscing elit nibh massa</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nibh massa.</p>
</div>
</div>

---

<div class="row">
<h2>Image Rows</h2>
<div class="small-12 medium-4 columns"
<img src="https://placeimg.com/480/480/animals" alt="Place Holder Image">
</div>
<div class="small-12 medium-8 columns">
<h4>Student Profile</h4>
<a href="#" class="cc-right-headerlink">Sapien lobortis laoreet aenean vitae nulla</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nibh massa. </p>
</div>
</div>
<div class="row">
<div class="small-12 medium-4 columns"
<img src="https://placeimg.com/480/480/animals" alt="Place Holder Image">
</div>
<div class="small-12 medium-8 columns">
<h4>Research</h4>
<a href="#" class="cc-right-headerlink">Nulla ut nibh massa</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nibh massa. </p>
</div>
</div>