3-A Image Caption

This is a caption

<div data-aau="imageloader" data-src="image.jpg">
  <p class="caption">This is a caption</p>
</div>
3-B Directory Item
Phil Hamlett

Director of Advertising

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis pharetra leo vitae imperdiet. Fusce vel dolor non nunc ornare imperdiet in eget lectus. Curabitur eleifend commodo convallis. In hac habitasse platea dictumst. Vestibulum auctor sem sed velit dictum, a aliquam ipsum facilisis. Pellentesque pulvinar ligula quis orci malesuada consectetur. Nam nulla sem, iaculis ac hendrerit ac, auctor a ante. Donec eget ligula vitae turpis aliquet lacinia. Nam ultrices ac quam et porttitor. Sed commodo, orci ut tempor gravida, velit dolor pulvinar sapien, sit amet pharetra justo odio sit amet leo. Nullam ullamcorper nulla ac odio sagittis, non blandit augue.

<div class="directory-item">
  <div class="columns small-3 tablet-2 medium-2 tablet-offset-1">
    <div class="marged">
      <div data-aau="imageloader" data-src="../../vendors/docs/images/directories/face2.jpg"></div>
    </div>
  </div>
  <div class="columns tablet-8 medium-offset-1">
    <div class="marged padded">
      <h6>Phil Hamlett</h6>
      <p>Director of Advertising</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis pharetra leo vitae imperdiet. Fusce vel dolor non nunc ornare imperdiet in eget lectus. Curabitur eleifend commodo convallis. In hac habitasse platea dictumst. Vestibulum auctor sem sed velit dictum, a aliquam ipsum facilisis. Pellentesque pulvinar ligula quis orci malesuada consectetur. Nam nulla sem, iaculis ac hendrerit ac, auctor a ante. Donec eget ligula vitae turpis aliquet lacinia. Nam ultrices ac quam et porttitor. Sed commodo, orci ut tempor gravida, velit dolor pulvinar sapien, sit amet pharetra justo odio sit amet leo. Nullam ullamcorper nulla ac odio sagittis, non blandit augue.</p>
    </div>
  </div>
</div>
3-C Block image Left vertical-align
Left Align, Vertical middle

Online Education

Craft your own class schedule with our online education programs. All that's required is a passion for learning and Internet access.

Learn About Online Education

<div class="row block-image">
  <div class="columns tablet-6">
    <div class="marged">
      <div data-aau="imageloader" data-src=""></div>
    </div>
  </div>
  <div class="columns tablet-6 text-centered_small text-left_tablet">
    <div class="valign-wrapper info">
      <div class="marged padded valign">
        <h2>title</h2>
        <p>text</p>
        <p><a href="#" class="btn btn-standard">button</a></p>
      </div>
    </div>
  </div>
</div>
Center Align, Vertical middle

Online Education

Craft your own class schedule with our online education programs. All that's required is a passion for learning and Internet access.

Learn About Online Education

<div class="row block-image">
  <div class="columns tablet-6">
    <div class="marged">
      <div data-aau="imageloader" data-src=""></div>
    </div>
  </div>
  <div class="columns tablet-6 text-centered">
    <div class="valign-wrapper info">
      <div class="marged padded valign">
        <h2>title</h2>
        <p>text</p>
        <p><a href="#" class="btn btn-standard">button</a></p>
      </div>
    </div>
  </div>
</div>
Left Align, Vertical top

Online Education

Craft your own class schedule with our online education programs. All that's required is a passion for learning and Internet access.

Learn About Online Education

<div class="row block-image">
  <div class="columns tablet-6">
    <div class="marged">
      <div data-aau="imageloader" data-src=""></div>
    </div>
  </div>
  <div class="columns tablet-6 text-centered_small text-left_tablet">
    <div class="marged padded info">
      <h2>title</h2>
      <p>text</p>
      <p><a href="#" class="btn btn-standard">button</a></p>
    </div>
  </div>
</div>
3-D Block image Right
Left Align, Vertical middle

Online Education

Craft your own class schedule with our online education programs. All that's required is a passion for learning and Internet access.

Learn About Online Education

<div class="row blcok-image">
  <div class="columns tablet-6 tablet-push-6">
    <div class="marged">
      <div data-aau="imageloader" data-src="../../vendors/docs/images/housing2.jpg"></div>
    </div>
  </div>
  <div class="columns tablet-6 tablet-pull-6 text-centered_small text-left_tablet">
    <div class="valign-wrapper info">
      <div class="marged padded valign">
        <h2>Online Education</h2>
        <p>Craft your own class schedule with our online education programs. All that's required is a passion for learning and Internet access.</p>
        <p><a href="" class="btn btn-standard">Learn About Online Education</a></p>
      </div>
    </div>
  </div>
</div>
Center Align, Vertical middle

Online Education

Craft your own class schedule with our online education programs. All that's required is a passion for learning and Internet access.

Learn About Online Education

<div class="row">
  <div class="columns tablet-6 tablet-push-6">
    <div class="marged">
      <div data-aau="imageloader" data-src="../../vendors/docs/images/housing2.jpg"></div>
    </div>
  </div>
  <div class="columns tablet-6 tablet-pull-6 text-centered">
    <div class="valign-wrapper info">
      <div class="marged padded valign">
        <h2>Online Education</h2>
        <p>Craft your own class schedule with our online education programs. All that's required is a passion for learning and Internet access.</p>
        <p><a href="" class="btn btn-standard">Learn About Online Education</a></p>
      </div>
    </div>
  </div>
</div>
Left Align, Vertical top

Online Education

Craft your own class schedule with our online education programs. All that's required is a passion for learning and Internet access.

Learn About Online Education

<div class="row block-image">
  <div class="columns tablet-6 tablet-push-6">
    <div class="marged">
      <div data-aau="imageloader" data-src="../../vendors/docs/images/housing2.jpg"></div>
    </div>
  </div>
  <div class="columns tablet-6 tablet-pull-6 text-centered_small text-left_tablet">
    <div class="marged padded info">
      <h2>Online Education</h2>
      <p>Craft your own class schedule with our online education programs. All that's required is a passion for learning and Internet access.</p>
      <p><a href="" class="btn btn-standard">Learn About Online Education</a></p>
    </div>
  </div>
</div>
3-E Block video Right

Online Education

Craft your own class schedule with our online education programs. All that's required is a passion for learning and Internet access.

Learn About Online Education

<div class="row block-video">
  <div class="columns tablet-6 tablet-push-6">
    <div class="marged">
      <div data-aau="videoloader" data-src="video.mp4" data-img="../../../vendors/docs/images/12-columns-image.jpg"></div>
    </div>
  </div>
  <div class="columns tablet-6 tablet-pull-6 text-centered">
    <div class="valign-wrapper info">
      <div class="marged padded valign">
        <h3>Online Education</h3>
        <p>Craft your own class schedule with our online education programs. All that's required is a passion for learning and Internet access.</p>
        <p><a href="" class="btn btn-standard">Learn About Online Education</a></p>
      </div>
    </div>
  </div>
</div>
3-F Full Width Images
<div class="full-size" data-aau="imageloader" data-resize="true" data-alt="Image description" data-src="../../vendors/docs/images/hero.jpg">
</div>

Sign In