4-A Related Links
<div class="columns related-link">
  <a href="#">
    <div class="marged">
      <div data-aau="imageloader" data-src="image.jpg" data-resize="true" data-alt="some description"></div>
    </div>
    <div class="marged padded text-centered info">
      <p>Some Link</p>
    </div>
  </a>
</div>
Example in Use
<div class="block-thumb">
  <div class="row">
    <div class="marged padded text-centered">
      <h3>Related Links</h3>
    </div>
  </div>
  <div class="row" data-aau="related-links">
    
    <div class="columns related-link">
      <a href="#">
        <div class="marged">
          <div data-aau="imageloader" data-src="../../vendors/pages/academics/4col/04.jpg" data-resize="true" data-alt="some description"></div>
        </div>
        <div class="marged padded text-centered info">
          <p>Information for Students</p>
        </div>
      </a>
    </div>
    
    <div class="columns related-link">
      <a href="#">
        <div class="marged">
          <div data-aau="imageloader" data-src="../../vendors/pages/academics/4col/05.jpg" data-resize="true" data-alt="some description"></div>
        </div>
        <div class="marged padded text-centered info">
          <p>Information for Parents</p>
        </div>
      </a>
    </div>
    
    <div class="columns related-link">
      <a href="#">
        <div class="marged">
          <div data-aau="imageloader" data-src="../../vendors/pages/academics/4col/06.jpg" data-resize="true" data-alt="some description"></div>
        </div>
        <div class="marged padded text-centered info">
          <p>Information for Industry</p>
        </div>
      </a>
    </div>
    
  </div>
</div>
4-B Links and Description, 4 Columns
<div class="columns tablet-4 link-desc-item">
  <div class="marged">
    <a href="#">
      <div data-aau="imageloader" data-src="image.jpg" data-resize="false" data-alt="some description"></div>
    </a>
  </div>
  <div class="marged padded text-centered">
    <p class="lead"><a href="#">Some Link</a></p>
    <p class="unmarged">Some Description</p>
  </div>
</div>
Example in Use

Other learning opportunities

<div class="row block-thumb">
  <div class="marged padded text-centered">
    <h2>Other learning opportunities</h2>
  </div>
  <div class="columns tablet-4 link-desc-item">
    <div class="marged">
      <a href="#">
        <div data-aau="imageloader" data-src="image.jpg" data-resize="true" data-alt="some description"></div>
      </a>
    </div>
    <div class="marged padded text-centered info">
      <p class="lead"><a href="#">Continuing Education</a></p>
      <p class="unmarged">Enhance your skill set by focusing on select coursework.</p>
    </div>
  </div>
  <div class="columns tablet-4 link-desc-item">
    <div class="marged">
      <a href="#">
        <div data-aau="imageloader" data-src="image.jpg" data-resize="true" data-alt="some description"></div>
      </a>
    </div>
    <div class="marged padded text-centered info">
      <p class="lead"><a href="#">Pre-College Program</a></p>
      <p class="unmarged">Programs designed to prepare high school students for life at a top-tier university.</p>
    </div>
  </div>
  <div class="columns tablet-4 link-desc-item">
    <div class="marged">
      <a href="#">
        <div data-aau="imageloader" data-src="image.jpg" data-resize="true" data-alt="some description"></div>
      </a>
    </div>
    <div class="marged padded text-centered info">
      <p class="lead"><a href="#">Study Abroad</a></p>
      <p class="unmarged">Immerse yourself in a European arts education.</p>
    </div>
  </div>
</div>
4-C Videos Links
Example in Use
<div class="row">
  <div class="columns tablet-3 video-link-item">
    <div class="row">
      <div class="column small-6 tablet-12">
        <div class="marged">
          <a href="#">
            <div data-aau="videoloader" data-img="image.jpg" data-link="true" ></div>
          </a>
        </div>
      </div>
      <div class="column small-6 tablet-12">
        <div class="marged text-centered_tablet info">
          <div class="valign-wrapper">
            <a href="#">Title of the video</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ... -->
</div>
4-D Title and Descriptions Thumbnails, 4 Columns
<div class="columns tablet-4 link-desc-item">
  <div class="marged">
    <a href="#">
      <div data-aau="imageloader" data-src="image.jpg" data-resize="false" data-alt="some description"></div>
    </a>
  </div>
  <div class="marged padded text-centered">
    <p class="lead"><a href="#">Some Link</a></p>
    <p class="unmarged">Some Description</p>
  </div>
</div>
Example in Use

What We Believe

<div class="row block-thumb">
  <div class="marged padded text-centered">
    <h2>Other learning opportunities</h2>
  </div>
  <div class="columns tablet-4 link-desc-item">
    <div class="marged">
      <a href="#">
        <div data-aau="imageloader" data-src="image.jpg" data-resize="true" data-alt="some description"></div>
      </a>
    </div>
    <div class="marged padded text-centered info">
      <p class="lead"><a href="#">Continuing Education</a></p>
      <p class="unmarged">Enhance your skill set by focusing on select coursework.</p>
    </div>
  </div>
  <div class="columns tablet-4 link-desc-item">
    <div class="marged">
      <a href="#">
        <div data-aau="imageloader" data-src="image.jpg" data-resize="true" data-alt="some description"></div>
      </a>
    </div>
    <div class="marged padded text-centered info">
      <p class="lead"><a href="#">Pre-College Program</a></p>
      <p class="unmarged">Programs designed to prepare high school students for life at a top-tier university.</p>
    </div>
  </div>
  <div class="columns tablet-4 link-desc-item">
    <div class="marged">
      <a href="#">
        <div data-aau="imageloader" data-src="image.jpg" data-resize="true" data-alt="some description"></div>
      </a>
    </div>
    <div class="marged padded text-centered info">
      <p class="lead"><a href="#">Study Abroad</a></p>
      <p class="unmarged">Immerse yourself in a European arts education.</p>
    </div>
  </div>
</div>
4-E Link & Descriptions, 3 Columns
Example in Use
<div class="row block-thumb thumb-contact">
  <div class="marged padded text-centered">
    <h2>Roster</h2>
  </div>
  <div class="row" data-aau="filters" id="exampleonefilter" data-target="#athletics">
    <div class="float-left_tablet">
      <div class="marged padded"><p>View by:</p></div>
    </div>
    <div class="columns tablet-3">
      <div class="marged">
        <select id="year" data-maxitemsvisible="5">
          <option value="2013">2013 Season</option>
          <option value="2012">2012 Season</option>
          <option value="2011">2011 Season</option>
        </select>
      </div>
    </div>
  </div>
  <div class="row" id="athletics">
    <div class="columns tablet-3 link-desc-item" data-filtereditem data-year="2013">
      <div class="marged">
        <div class="rounded" data-aau="imageloader" data-src="image.jpg" data-resize="false" data-alt="some description"></div>
      </div>
      <div class="marged padded text-centered info">
        <p><a href="#">Athlete Name</a><br/>
          Position<br/>
          <a href="#">Department</a></p>
      </div>
    </div>
    <!-- ... -->
  </div>
</div>
4-F Contact Thumbnail

Advertising

Edmond Boey

bfa.adv.rep@art.edu

Animation & Visual Effects

Edmond Boey

bfa.adv.rep@art.edu

Music Production & Sound Design for Visual Media

Edmond Boey

bfa.adv.rep@art.edu

Advertising

Edmond Boey

bfa.adv.rep@art.edu

Music Production & Sound Design for Visual Media

Edmond Boey

bfa.adv.rep@art.edu

Advertising

Edmond Boey

bfa.adv.rep@art.edu

Advertising

Edmond Boey

bfa.adv.rep@art.edu

<div class="columns tablet-6 contact-item">
  <div class="row">
    <div class="column small-3">
      <div class="marged">
        <div class="rounded" data-aau="imageloader" data-src="image.jpg" data-resize="false" data-alt="some description"></div>
      </div>
    </div>
    <div class="column small-9">
      <div class="marged info">
        <p><b>Advertising</b></p>
        <p>Edmond Boey</p>
        <p><a href="javascript:void(0);">bfa.adv.rep@art.edu</a></p>
      </div>
    </div>
  </div>
</div>
4-G Link in Box
<div class="columns tablet-4 box-link-item">
  <div class="row">
    <a href="#">
      <div class="columns small-3 tablet-12 small-push-9 tablet-unpush">
        <div class="marged">
          <div data-aau="imageloader" data-src="image.jpg" data-resize="true" data-alt="some description"></div>
        </div>
      </div>
      <div class="columns small-9 tablet-12 small-pull-3 tablet-unpull">
        <div class="marged padded info">
          <p>Ear is the text</p>
        </div>
      </div>
    </a>
  </div>
</div>
4-H Link Stacked
        <div class="columns small-box-link-item">
          <div class="row">
            <a href="">
              <div class="columns small-9">
                <div class="padded info">
                  <p>Lorem ipsum dolor sit amet torquent augue litora elit, Curae mattis.Ut tellus.</p>
                </div>
              </div>
              <div class="columns small-3">
                <div class="marged">
                  <div data-aau="imageloader" data-src="news1.jpg" data-resize="true" data-alt="some description"></div>
                </div>
              </div>
            </a>
          </div>
        </div>
4-I Link with description, Tags, 8 Columns
      <div class="large-link-item">
        <a href="#">
          <div data-aau="imageloader" data-src="../../vendors/docs/images/12-columns-image.jpg" data-resize="false" data-alt="some description"></div>
        </a>
        <div class="row">
          <div class="columns medium-6">
            <div class="padded info">
              <h5 class="title">Lorem ipsum dolor sit amet eu mus hendrerit venenatis.</h3>
              <p class="small muted">posted on 5/29/2013 in <a href="#">tag1</a><a href="#">tag2</a></p>
            </div>
          </div>
          <div class="columns medium-6">
            <div class="padded info">
              <p>Lorem ipsum dolor sit amet massa torquent porttitor primis, habitasse. Facilisi metus Donec varius tellus habitant. Aptent hendrerit semper leo habitasse porta congue pellentesque est venenatis Maecenas. Ut nostra urna id, netus. Posuere Sed.Montes Suspendisse sit arcu, diam, varius primis ad. Dolor! Bibendum parturient, vitae vulputate ut morbi imperdiet risus justo. varius primis ad. Dolor! Bibendum parturient, vitae vulputate ut morbi imperdiet risus justo.</p>
            </div>
          </div>
        </div>
      </div>
4-J Portfolio Thumbnail

Janisha Patel

Photography

Min S Kim

Game Design

Roderick Van Gelder

Acting

Jeremy Brown

Sculpture

Jonathan Ive

Industrial Design

Tom Ford

Fashion Design

<div class="row block-thumb">
  <div class="marged padded text-centered">
    <h2>Graduating Portfolio</h2>
  </div>
  <!-- include the portfolio filter here -->
  <div class="row" id="portfolio">
    <div class="columns tablet-3 portfolio-item" data-filtereditem data-program="undergraduate">
      <div class="marged">
        <div class="row white">
          <div class="column small-6 tablet-12">
            <a href="#">
              <div data-aau="imageloader" data-src="image.jpg" data-resize="true" data-alt="some description"></div>
            </a>
          </div>
          <div class="column small-6 tablet-12">
            <div class="padded text-centered_tablet info">
              <p>Student Name</p>
              <p><a href="#">Department</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ... -->
  </div>
</div>

Sign In