<h2 class="label">Staff Profile - Right Text</h2>

<div class="flex-row">
    <div class="flex-column profile">
        <figure class="featured"><img src="../../images/profile-2-sq.jpg" /></figure>
        <h6>Course Director</h6>
        <p><strong>Contact:</strong> <a href="#">csurname@csu.edu.au</a></p>
        <p><strong>Twitter:</strong> <a href="#">@csurname</a></p>
        <p><strong>Website:</strong> <a href="#">www.cristian-surname.com</a></p>
    </div>
    <div class="flex-column-2">
        <h4 class="csu-green">Christian Surname</h4>
        <p>Spent several months developing shaving cream in West Palm Beach, FL. Lead a team buying and selling catfish in Libya. Spent 2001-2005 getting my feet wet with fried chicken in Deltona, FL. Managed a small team working on cigarettes in Cuba. Spent
            2001-2007 investing in toy planes in Minneapolis, MN. Garnered an industry award while getting to know junk food in Jacksonville, FL.</p>
    </div>
</div>

<h2 class="label">Staff Profile - Left Text</h2>

<div class="flex-row">
    <div class="flex-column-2">
        <h4 class="csu-green">Christian Surname</h4>
        <p>Spent several months developing shaving cream in West Palm Beach, FL. Lead a team buying and selling catfish in Libya. Spent 2001-2005 getting my feet wet with fried chicken in Deltona, FL. Managed a small team working on cigarettes in Cuba. Spent
            2001-2007 investing in toy planes in Minneapolis, MN. Garnered an industry award while getting to know junk food in Jacksonville, FL.</p>
    </div>
    <div class="flex-column profile">
        <figure class="featured"><img src="../../images/profile-2-sq.jpg" /></figure>
        <h6>Course Director</h6>
        <p><strong>Contact:</strong> <a href="#">csurname@csu.edu.au</a></p>
        <p><strong>Twitter:</strong> <a href="#">@csurname</a></p>
        <p><strong>Website:</strong> <a href="#">www.cristian-surname.com</a></p>
    </div>
</div>
<h2 class="label">{{ modifier }} - Right Text</h2>

<div class="flex-row">
  <div class="flex-column profile">
    <figure class="featured"><img src="{{path profile-pic-2 }}" /></figure>
    <h6>Course Director</h6>
    <p><strong>Contact:</strong> <a href="#">{{ bio-email }}</a></p>
    <p><strong>Twitter:</strong> <a href="#">@{{ bio-twitter }}</a></p>
    <p><strong>Website:</strong> <a href="#">{{ bio-website }}</a></p>
  </div>
  <div class="flex-column-2">
    <h4 class="csu-{{ colour-1 }}">{{ bio-name }}</h4>
    <p>{{ bio-text }}</p>
  </div>
</div>

<h2 class="label">{{ modifier }} - Left Text</h2>

<div class="flex-row">
  <div class="flex-column-2">
    <h4 class="csu-{{ colour-1 }}">{{ bio-name }}</h4>
    <p>{{ bio-text }}</p>
  </div>
  <div class="flex-column profile">
    <figure class="featured"><img src="{{path profile-pic-2 }}" /></figure>
    <h6>Course Director</h6>
    <p><strong>Contact:</strong> <a href="#">{{ bio-email }}</a></p>
    <p><strong>Twitter:</strong> <a href="#">@{{ bio-twitter }}</a></p>
    <p><strong>Website:</strong> <a href="#">{{ bio-website }}</a></p>
  </div>
</div>

These templates can be used to create simple staff pages. Swap out details, colour classes and link information.