2-A Share Button
<div class="share" data-aau="menutoggle">
  <span class="label-share">Share</span>
  <a href="#" class="btn-icon icon-facebook"></a>
  <a href="#" class="btn-icon icon-twitter"></a>
  <a href="#" class="btn-icon icon-pinterest"></a>
</div>
2-B Alert

The 2013 Spring Show is now open. View our best work from this year.

Explore the Spring Show
<div class="alert">
  <div class="row">
    <div class="marged text-centered">
      <p>The 2013 Spring Show is now open. View our best work from this year.</p> 
      <a href="#" class="btn btn-standard">Explore the Spring Show</a>
    </div>
  </div>
</div>
2-C Facts, 4 columns

Facts About Us

80%

Approximately 80% percent of our graduating students find work in their field of study.

2002

We've been offering an innovative online arts education since 2002.

70+

We hold over 70 student and alumni art shows and gallery exhibitions in San Francisco each year.

<div class="block-text">
  <div class="row">
    <div class="marged padded text-centered">
      <h2>title</h2>
    </div>
  </div>
  <div class="row">
    <div class="columns tablet-4 fact-item">
      <div class="marged padded">
        <p class="number">number</p>
        <p class="muted">desc</p>
      </div>
    </div><div class="columns tablet-4 fact-item">
      <div class="marged padded">
        <p class="number">number</p>
        <p class="muted">desc</p>
      </div>
    </div><div class="columns tablet-4 fact-item">
      <div class="marged padded">
        <p class="number">number</p>
        <p class="muted">desc</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="marged padded text-centered">
      <p><a href="href" class="btn btn-standard">btn</a></p>
    </div>
  </div>
</div>
2-D FAQ, 4 columns

Frequently Asked Questions

What kind of classes will I take in the Pre-College Program?

How do I find out if I'm Eligible for Pre-College?

Is housing provided for Pre-College students?

<div class="block-text">
  <div class="row">
    <div class="marged padded text-centered">
      <h3>Frequently Asked Questions</h3>
    </div>
  </div>
  <div class="row faq">
    
    <div class="columns tablet-4 faq-item">
      <div class="marged padded text-centered">
        <p>What kind of classes will I take in the Pre-College Program?</p>
      </div>
    </div>
    
    <div class="columns tablet-4 faq-item">
      <div class="marged padded text-centered">
        <p>How do I find out if I'm Eligible for Pre-College?</p>
      </div>
    </div>
    
    <div class="columns tablet-4 faq-item">
      <div class="marged padded text-centered">
        <p>Is housing provided for Pre-College students?</p>
      </div>
    </div>
    
  </div>
  <div class="row">
    <div class="marged padded text-centered">
      <p><a class="btn btn-standard" href="#">View More FAQ's</a></p>
    </div>
  </div>
</div>

Other Frequently Asked Questions

What kind of classes will I take in the Pre-College Program?

Academic FAQ

How do I find out if I'm Eligible for Pre-College?

Admission FAQ

Is housing provided for Pre-College students?

Student FAQ
<div class="block-text">
  <div class="row">
    <div class="marged padded text-centered">
      <h2>Other Frequently Asked Questions</h2>
    </div>
  </div>
  <div class="row faq">
    
    <div class="columns tablet-4 faq-item">
      <div class="marged padded text-centered">
        <p>What kind of classes will I take in the Pre-College Program?</p>
        <a href="#">Academic FAQ</a>
      </div>
    </div>
    
    <div class="columns tablet-4 faq-item">
      <div class="marged padded text-centered">
        <p>How do I find out if I'm Eligible for Pre-College?</p>
        <a href="#">Admission FAQ</a>
      </div>
    </div>
    
    <div class="columns tablet-4 faq-item">
      <div class="marged padded text-centered">
        <p>Is housing provided for Pre-College students?</p>
        <a href="#">Student FAQ</a>
      </div>
    </div>
    
  </div>
</div>
2-E/2-F/2-J Block Text Left, 6-columns

Online Pre-College

Lorem ipsum dolor sit amet mus consectetuer, diam morbi magnis, faucibus dictumst eget urna! Per dignissim malesuada hendrerit, natoque faucibus vel tristique sollicitudin. Ac, dapibus nibh rhoncus. Nulla eu est ad interdum at In..

Online Pre-College

Lorem ipsum dolor sit amet mus consectetuer, diam morbi magnis, faucibus dictumst eget urna! Per dignissim malesuada hendrerit, natoque faucibus vel tristique sollicitudin. Ac, dapibus nibh rhoncus. Nulla eu est ad interdum at In..

Online Pre-College

Lorem ipsum dolor sit amet mus consectetuer, diam morbi magnis, faucibus dictumst eget urna! Per dignissim malesuada hendrerit, natoque faucibus vel tristique sollicitudin. Ac, dapibus nibh rhoncus. Nulla eu est ad interdum at In..

<div class="row block-text">
  <div class="columns tablet-6">
    <div class="padded marged">
      <h3>Online Pre-College</h3>
      <p>Lorem ipsum dolor sit amet mus consectetuer, diam morbi magnis, faucibus dictumst eget urna! Per dignissim malesuada hendrerit, natoque faucibus vel tristique sollicitudin. Ac, dapibus nibh rhoncus. Nulla eu est ad interdum at In..</p>
    </div>
  </div>
  <div class="columns tablet-6">
    <div class="padded marged">
      <h3>Online Pre-College</h3>
      <p>Lorem ipsum dolor sit amet mus consectetuer, diam morbi magnis, faucibus dictumst eget urna! Per dignissim malesuada hendrerit, natoque faucibus vel tristique sollicitudin. Ac, dapibus nibh rhoncus. Nulla eu est ad interdum at In..</p>
    </div>
  </div>
</div>
2-G Events, 4 columns Stacked
          <div class="row event-item">
            <a href="">
              <div class="column small-9 tablet-8">
                <div class="padded">
                  <p class="desc">Approximate percentage of graduating students</p>
                </div>
              </div>
              <div class="column small-3 tablet-4">
                <p class="month">November</p>
                <p class="day">19</p>
              </div>
            </a>
          </div>
2-H Events, 3 columns Row
<div class="block-related">
  <div class="row">
    <div class="columns tablet-6">
      <div class="padded">
        <h3>Upcoming Events</h3>
      </div>
    </div>
    <div class="columns tablet-6">
      <div class="padded">
        <a href="#" class="float-right_tablet line-h3 link-btn">View Calendar for more Events</a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="column tablet-4">
      <div class="marged">
        <div class="row event-item">
          <div class="column small-9">
            <div class="padded">
              <p class="desc">Approximate percentage of graduating students ...</p>
            </div>
          </div>
          <div class="column small-3">
            <p class="month">November</p>
            <p class="day">19</p>
          </div>
        </div>
      </div>
    </div>
    <div class="column tablet-4">
      <div class="marged">
        <div class="row event-item">
          <div class="column small-9">
            <div class="padded">
              <p class="desc">Year we began offering online ...</p>
            </div>
          </div>
          <div class="column small-3">
            <p class="month">January</p>
            <p class="day">02</p>
          </div>
        </div>
      </div>
   </div>
    <div class="column tablet-4">
      <div class="marged">
        <div class="row event-item">
          <div class="column small-9">
            <div class="padded">
              <p class="desc">Student and alumni art shows ...</p>
            </div>
          </div>
          <div class="column small-3">
            <p class="month">February</p>
            <p class="day">23</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
2-I List of links, 12 col
<div class="row listoflinks" data-aau="listoflinks" data-title="links">
  <div class="columns tablet-4">
    <div class="padded marged">
      <ul class="links">
        <li>This is  a text link that spans 4 columns</li>
        <li>This is  a text link that spans 4 columns</li>
        <li>This is  a text link that spans 4 columns</li>
        <li>This is  a text link that spans 4 columns</li>
        <li>This is  a text link that spans 4 columns</li>
        <li>This is  a text link that spans 4 columns</li>
        <li>This is  a text link that spans 4 columns</li>
      </ul>
      <ul class="links">
      ...
      </ul>
      <ul class="links">
      ...
      </ul>
    </div>
  </div>
</div>
2-K Block Text, 12 columns

Online Pre-College

Lorem ipsum dolor sit amet mus consectetuer, diam morbi magnis, faucibus dictumst eget urna! Per dignissim malesuada hendrerit, natoque faucibus vel tristique sollicitudin. Ac, dapibus nibh rhoncus. Nulla eu est ad interdum at In..

Click Here

<div class="row block-text">
  <div class="padded marged text-centered">
    <h2>Online Pre-College</h2>
    <p>Lorem ipsum dolor sit amet mus consectetuer, diam morbi magnis, faucibus dictumst eget urna! Per dignissim malesuada hendrerit, natoque faucibus vel tristique sollicitudin. Ac, dapibus nibh rhoncus. Nulla eu est ad interdum at In..</p>
    <p><a href="" class="btn btn-standard">Click Here</a></p>
  </div>
</div>

Lorem ipsum dolor

Lorem ipsum dolor sit amet mus consectetuer, diam morbi magnis, faucibus dictumst eget urna! Per dignissim malesuada hendrerit, natoque faucibus vel tristique sollicitudin. Ac, dapibus nibh rhoncus. Nulla eu est ad interdum at In..

Click to Action

  <div class="row block-text">
    <div class="padded marged text-centered_small text-left_tablet">
      <h3>Lorem ipsum dolor</h3>
      <p>Lorem ipsum dolor sit amet mus consectetuer, diam morbi magnis, faucibus dictumst eget urna! Per dignissim malesuada hendrerit, natoque faucibus vel tristique sollicitudin. Ac, dapibus nibh rhoncus. Nulla eu est ad interdum at In..</p>
      <p><a href="#" class="btn btn-standard">CTA</a></p>
    </div>
  </div>
2-L Block Fine Print, 12 columns

Lorem ipsum dolor sit amet mus consectetuer, diam morbi magnis, faucibus dictumst eget urna! Per dignissim malesuada hendrerit, natoque faucibus vel tristique sollicitudin. Ac, dapibus nibh rhoncus. Nulla eu est ad interdum at In. Vestibulum. Enim, magna tincidunt nonummy! Senectus pellentesque. Torquent accumsan purus ullamcorper! Gravida. Sapien elementum tellus per euismod accumsan, Nam auctor lacinia. Fringilla ultricies ornare eu ipsum in pellentesque ultricies, felis.

  <div class="row block-text">
    <div class="padded marged">
      <p class="small">Lorem ipsum dolor sit amet mus consectetuer, diam morbi magnis, faucibus dictumst eget urna! Per dignissim malesuada hendrerit, natoque faucibus vel tristique sollicitudin. Ac, dapibus nibh rhoncus. Nulla eu est ad interdum at In. Vestibulum. Enim, magna tincidunt nonummy! Senectus pellentesque. Torquent accumsan purus ullamcorper! Gravida. Sapien elementum tellus per euismod accumsan, Nam auctor lacinia. Fringilla ultricies ornare eu ipsum in pellentesque ultricies, felis.</p>
    </div>
  </div>
2-M tags
<p class="muted">Tags: <a href="#">Athletics</a>, <a href="#">Men’s Basketball</a>, <a href="#">Game</a></p>
2-I Block of text 4 column

If you choose to study during Summer semester, please contact an Admissions Representative at 800.544.2787 (U.S. only)

If you choose to study during Summer semester, please contact an Admissions Representative at 800.544.2787 (U.S. only)

If you choose to study during Summer semester, please contact an Admissions Representative at 800.544.2787 (U.S. only)

<div class="row block-text">
  <div class="columns tablet-4">
    <div class="padded marged">
      <p>If you choose to study during Summer semester, please contact an Admissions Representative at 800.544.2787 (U.S. only)</p>
    </div>
  </div>
  <div class="columns tablet-4">
    <div class="padded marged">
      <p>If you choose to study during Summer semester, please contact an Admissions Representative at 800.544.2787 (U.S. only)</p>
    </div>
  </div>
  <div class="columns tablet-4">
    <div class="padded marged">
      <p>If you choose to study during Summer semester, please contact an Admissions Representative at 800.544.2787 (U.S. only)</p>
    </div>
  </div>
</div>

Text Centered

If you choose to study during Summer semester, please contact an Admissions Representative

If you choose to study during Summer semester, please contact an Admissions Representative

If you choose to study during Summer semester, please contact an Admissions Representative

<div class="row block-text">
  <div class="columns tablet-4">
    <div class="padded marged text-centered">
      <p>If you choose to study during Summer semester, please contact an Admissions Representative at 800.544.2787 (U.S. only)</p>
    </div>
  </div>
  <div class="columns tablet-4">
    <div class="padded marged text-centered">
      <p>If you choose to study during Summer semester, please contact an Admissions Representative at 800.544.2787 (U.S. only)</p>
    </div>
  </div>
  <div class="columns tablet-4">
    <div class="padded marged text-centered">
      <p>If you choose to study during Summer semester, please contact an Admissions Representative at 800.544.2787 (U.S. only)</p>
    </div>
  </div>
</div>
2-O Block tuition text, 6 col

Undergraduate

$785

per unit - 3 unit par class

Graduate

$885

per unit - 3 units per class

* If you choose to study during Summer semester, please contact an Admissions Representative at 800.544.2787 (U.S. only), 415.274.2200 or admissions@academyart.edu for Summer tuition and costs.

<div class="row">
  
  <div class="columns tablet-6">
    <div class="marged padded text-centered">
      <p><strong>Undergraduate</strong></p>
      <p class="highlight">$785</p>
      <p class="small">per unit - 3 unit par class</p>
    </div>
  </div>
  
  <div class="columns tablet-6">
    <div class="marged padded text-centered">
      <p><strong>Graduate</strong></p>
      <p class="highlight">$885</p>
      <p class="small">per unit - 3 units per class</p>
    </div>
  </div>
  
</div>
<div class="row">
  <div class="marged padded">
    <p>* If you choose to study during Summer semester, please contact an Admissions Representative at 800.544.2787 (U.S. only), 415.274.2200 or admissions@academyart.edu for Summer tuition and costs.</p>
  </div>
</div>
2-P Rich Text
<div class="rich-text">
  <!--> Enter your rich text here <-->
</div>

here is the list of class you can use with rich text:

  • .left: float left and take 50% of the screen (100% on mobile)
  • .right: float right and take 50% of the screen (100% on mobile)<
  • .quarter-left: float left and take 25% of the screen (100% on mobile)
  • .quarter-right: float right and take 25% of the screen (100% on mobile)<
  • .center: center and respect the size of the original image
  • .full: (default) 100%

Default State

This is a default image 100% width

<div data-aau="imageloader" data-src="image.jpg">
  <p class="caption">This is a default image 100% width</p>
</div>

Left State

This image is on the left

<div class="left" data-aau="imageloader" data-src="image.jpg">
  <p class="caption">This image is left</p>
</div>

Right State

This image is on the right

<div class="right" data-aau="imageloader" data-src="image.jpg">
  <p class="caption">This image is right</p>
</div>

Quarter Left State

This image is on the quarter left

<div class="quarter-left" data-aau="imageloader" data-src="image.jpg">
  <p class="caption">This image is quarter left</p>
</div>

Quarter Right State

This image is on the quarter right

<div class="quarter-right" data-aau="imageloader" data-src="image.jpg">
  <p class="caption">This image is quarter right</p>
</div>

Center State

This image is center

<div class="center" data-aau="imageloader" data-src="image.jpg">
  <p class="caption">This image is center</p>
</div>

Sign In