2 Modules

Reusable elements that can be used across the site, including self-contained components.

2.1.1 Carousel

Show/hide markup

<div class="component carousel">
  <div class="slider-for">
    <div class="item">
      <img src="http://placehold.it/768x434" alt="" />
      <h3>1. Proin sodales pulvinar tempor. Cum sociis natoque?</h3>
    </div>
    <div class="item">
      <img src="http://placehold.it/768x434" alt="" />
      <h3>2. Cum sociis natoque penatibus et magnis dis parturient montes?</h3>
    </div>
    <div class="item">
      <img src="http://placehold.it/768x434" alt="" />
      <h3>3. Proin sodales pulvinar tempor. Cum sociis natoque? Nulla luctus pharetra vulputate, felis tellus mollis orci?</h3>
    </div>
  </div>
  <div class="slider-nav items-3">
    <div class="item">
      <img src="http://placehold.it/112x63" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/112x63" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/112x63" alt="" />
    </div>
  </div>
</div>

2.1.2 Carousel - Full Bleed

Show/hide markup

<div class="component carousel-full">
  <div class="item">
    <img src="http://lorempixel.com/1220/505/city" alt="" />
    <div class="text">
      <h3>For International Students</h4>
      <h2>Opportunities Abound.</h3>
      <a href="" class="more">Find Yours</a>
    </div>
  </div>
  <div class="item">
    <img src="http://loremflickr.com/1220/505/transport" alt="" />
    <div class="text">
      <h3>For U.S. Higher Education Professional</h4>
      <h2>Opportunities Abound.</h3>
      <a href="" class="more">Learn More</a>
    </div>
  </div>
  <div class="item">
    <img src="http://loremflickr.com/1220/505/nature" alt="" />
    <div class="text">
      <h3>For International Students</h4>
      <h2>Opportunities Abound.</h3>
      <a href="" class="more">Find Yours</a>
    </div>
  </div>
  <div class="item">
    <img src="http://loremflickr.com/1220/505/nightlife" alt="" />
    <div class="text">
      <h3>For Foreign Institutions and Governments</h4>
      <h2>Opportunities Abound.</h3>
      <a href="" class="more">Learn More</a>
    </div>
  </div>
</div>

2.2 Log-In Button

Show/hide markup

<div class="component login"><a href="">Log In</a></div>

2.3 Social Media Sharing

Show/hide markup
<div class="sharethis-wrapper">
  <span st_url="http://edusa.eca.advomatic.dev/your-5-steps-us-study/educationusa-research-your-options-us-study" st_title="EducationUSA" class="st_facebook_custom" displayText="facebook"></span>
  <span st_url="http://edusa.eca.advomatic.dev/your-5-steps-us-study/educationusa-research-your-options-us-study" st_title="EducationUSA" class="st_twitter_custom" displayText="twitter"></span>
  <span st_url="http://edusa.eca.advomatic.dev/your-5-steps-us-study/educationusa-research-your-options-us-study" st_title="EducationUSA" class="st_googleplus_custom" displayText="googleplus"></span>
  <span st_url="http://edusa.eca.advomatic.dev/your-5-steps-us-study/educationusa-research-your-options-us-study" st_title="EducationUSA" class="st_sina_custom" displayText="sina"></span>
</div>

2.4 Media Feature

Why Other Students Chose the USA

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Show/hide markup
<div class="component media-feature ">
  <img src="http://placehold.it/670x378" alt="" />
  <div class="content">
    <h2>Why Other Students Chose the USA</h2>
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
  </div>
</div>

2.5 Small Promo

ForParents

Lorem ipsum dolor sit amet, consectetur adipiscing elit non adip. Iscing elit et nullman vulputate nimnt quam. Lorem Ipsum Dolor

Show/hide markup
<div class="component promo promo-small">
  <img src="http://placehold.it/670x378" alt="" />
  <div class="content">
    <h2><span class="bar"></span><span class="small">For</span><span class="big">Parents</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit non adip. Iscing elit et nullman vulputate nimnt quam. <a href="" class="more">Lorem Ipsum Dolor</a></p>
  </div>
</div>

2.6 Subnavigation

Show/hide markup
<div class="component subnavigation">
  <ul>
    <li><a href=""><span class="small">For</span> International Students </a></li>
    <li><a href=""><span class="small">For</span> U.S. Higher Education Professionals </a></li>
    <li><a href=""><span class="small">For</span> Foreign Institutions and Governments</a></li>
  </ul>
</div>

2.7 5 Steps Subnavigation

Show/hide markup
<div class="component five-steps-subnavigation">
  <ol>
    <li><a class="aqua" href="">Research your options</a></li>
    <li><a class="green" href="">Finance your studies</a></li>
    <li><a class="orange" href="">Complete your application</a></li>
    <li><a class="lightblue" href="">Apply for your student visa</a></li>
    <li><a class="purple" href="">Prepare for your departure</a></ll>
  </ol>
</div>

2.8 5 Stamps

Research Your Options

Lorem ipsum dolor Amet, consectetur adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laore.

Finance Your Studies

Lorem ipsum dolor Amet, consectetur adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laore.

Complete Your Application

Lorem ipsum dolor Amet, consectetur adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laore.

Apply for Your Student Visa

Lorem ipsum dolor Amet, consectetur adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laore.

Prepare for Your Departure

Lorem ipsum dolor Amet, consectetur adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laore.

Show/hide markup
<div class="five-stamps-wrapper">
  <div class="stamp stamp-one">
    <div class="content">
      <a href="" class="stamp-image"/>
      <h2>Research Your Options</h2>
      </a>
      <p>Lorem ipsum dolor Amet, consectetur adipiscing elit, sed diam nonummy nibh <a href="">euismod tincidunt ut</a> laore.</p>
    </div>
  </div>
  <div class="stamp stamp-two">
    <div class="content">
      <a href="" class="stamp-image"/>
      <h2>Finance Your Studies</h2>
      </a>
      <p>Lorem ipsum dolor Amet, consectetur adipiscing elit, sed diam nonummy nibh <a href="">euismod tincidunt ut</a> laore.</p>
    </div>
  </div>
  <div class="stamp stamp-three">
    <div class="content">
      <a href="" class="stamp-image"/>
      <h2>Complete Your Application</h2>
      </a>
      <p>Lorem ipsum dolor Amet, consectetur adipiscing elit, sed diam nonummy nibh <a href="">euismod tincidunt ut</a> laore.</p>
    </div>
  </div>
  <div class="stamp stamp-four">
    <div class="content">
      <a href="" class="stamp-image"/>
      <h2>Apply for Your Student Visa</h2>
      </a>
      <p>Lorem ipsum dolor Amet, consectetur adipiscing elit, sed diam nonummy nibh <a href="">euismod tincidunt ut</a> laore.</p>
    </div>
  </div>
  <div class="stamp stamp-five">
    <div class="content">
      <a href="" class="stamp-image"/>
      <h2>Prepare for Your Departure</h2>
      </a>
      <p>Lorem ipsum dolor Amet, consectetur adipiscing elit, sed diam nonummy nibh <a href="">euismod tincidunt ut</a> laore.</p>
    </div>
  </div>
</div>

2.9 Events - Full-bleed

In my opinion, the quality of education provided by the best universities in the United States is not found anywhere else in the world.

Fahad Hassan

Show/hide markup
<div class="components events-full">
  <div class="event-listings">
    <div class="event">
      <div class="event-date">
        <span class="month">Mar </span><span class="day">27 </span><span class="year">2014</span>
      </div>
      <div class="event-details">
        <p class="label">In-person</p>
        <p class="headline"><a href="" class="more">Facebook Chat with an EducationUSA Advisor @ Facebook.com/EducationUSADelhi lorum ipsum</a></p>
        <p><span class="label">For</span> <a href="">U.S. Higher Education Professionals</a></p>
        <p><span class="label">Location</span> <a href="">Armenia</a></p>
      </div>
    </div>
    <div class="event">
      <div class="event-date">
        <span class="month">Apr </span><span class="day">14 </span><span class="year">2014</span>
      </div>
      <div class="event-details">
        <p class="label">In-person</p>
        <p class="headline"><a href="" class="more">Step 4: Apply for your Student Visa</a></p>
        <p><span class="label">For</span> <a href="">International Students</a></p>
        <p><span class="label">Location</span> <a href="">Online</a></p>
      </div>
    </div>
    <div class="more-events"><a href="" class="more">View more</a></div>
  </div>
  <div class="image-wrapper"> 
    <img src="http://placekitten.com/900/450" alt="" />
    <div class="testimonial">
      <blockquote class="alt">In my opinion, the quality of education provided by the best universities in the United States is not found anywhere else in the world.</blockquote><p class="attribution">Fahad Hassan</p>
    </div>
  </div>
</div>

2.10 Marquee

Test Manual Prefix

Marquee test manual prefix

EducationUSA's Regional Educational Advising Coordinator (REAC) Team!

EducationUSA's Regional Educational Advising Coordinator (REAC) Team!

Step 1

Research Your Options

Step 2

Finance Your Studies

Step 3

Complete Your Education

Step 4

Apply for Your Student Visa

Step 5

Prepare for Your Departure

Show/hide markup

<div class="component marquee">
  <div class="marquee-single-image">
    <img src="https://placeimg.com/1040/330/architecture" width="613" height="409.5">
  </div>
  <div class="badge">
    <h3>Test Manual Prefix</h3>
    <h2>Marquee test manual prefix</h2>
  </div>
</div>
<div class="component marquee">
  <div class="marquee-double-image">
    <span>
      <img src="https://placeimg.com/520/330/animals" alt="" >
    </span>
    <span>
    <img src="https://placeimg.com/520/330/people" alt="" >
    </span>
  </div>
  <div class="badge">
    <h2>EducationUSA's Regional Educational Advising Coordinator (REAC) Team!</h2>
    <h2>
    </h2>
  </div>
</div>
<div class="component marquee regions">
  <div class="marquee-single-image">
    <span>
      <img src="https://placeimg.com/1040/330/animals/grayscale" alt="" >
    </span>
  </div>
  <div class="badge">
    <h2>EducationUSA's Regional Educational Advising Coordinator (REAC) Team!</h2>
    <h2>
    </h2>
  </div>
</div>
<div class="component marquee step step-one">
  <div class="marquee-single-image">
    <span>
      <img src="https://placeimg.com/1040/330/animals" alt="">
    </span>
  </div>
  <div class="badge">
    <h3>Step 1</h3>
    <h2>Research Your Options</h2>
  </div>
</div>
<div class="component marquee step step-two">
  <div class="marquee-single-image">
    <span>
      <img src="https://placeimg.com/1040/330/architecture" alt="">
    </span>
  </div>
  <div class="badge">
    <h3>Step 2</h3>
    <h2>Finance Your Studies</h2>
  </div>
</div>
<div class="component marquee step step-three">
  <div class="marquee-single-image">
    <span>
      <img src="https://placeimg.com/1040/330/nature" alt="">
    </span>
  </div>
  <div class="badge">
    <h3>Step 3</h3>
    <h2>Complete Your Education</h2>
  </div>
</div>
<div class="component marquee step step-four">
  <div class="marquee-single-image">
    <span>
      <img src="https://placeimg.com/1040/330/people" alt="" >
    </span>
  </div>
  <div class="badge">
    <h3>Step 4</h3>
    <h2>Apply for Your Student Visa</h2>
  </div>
</div>
<div class="component marquee step step-five">
  <div class="marquee-single-image">
    <span>
      <img src="https://placeimg.com/1040/330/tech" alt="" >
    </span>
  </div>
  <div class="badge">
    <h3>Step 5</h3>
    <h2>Prepare for Your Departure</h2>
  </div>
</div>

2.11 Image with rollover

Living on campus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere tincidunt nisl et eleifend.

Show/hide markup
<div class="component image-rollover">
  <img class="image-rollover__image" src="https://placeimg.com/654/476/animals" />
  <div class="image-rollover__overlay">
      <h2 class="image-rollover__title">Living on campus<a class="arrow" href="#"></a></h2>
      <p class="image-rollover__content intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere tincidunt nisl et eleifend.</p>
  </div>
</div>

2.12 Good to Know

Good to Know

Application and financial aid deadlines affect you when you take standardized tests. Your test results must reach admissions offices no later than these deadlines.

Show/hide markup
<div class="component good-to-know">
  <span class="stamp-gtk"></span>
  <div class="content">
    <h2>Good <span class="small">to</span> Know</h2>
    <p>Application and financial aid deadlines affect you when you take standardized tests. Your test results must reach admissions offices no later than these <a href="#">deadlines</a>.</p>
  </div>
</div>

2.13 Testimonial Feature

Lorem ipsum dolor sit amet, consectetur adipiscing elit et. Nullam vulputate ni quam vite orci aliquet, non adipiscing lorem quin sollicitudin.

Read more about Sam's Experience

Show/hide markup
<div class="components testimonial-full">
<div class="testimonial-photo">
  <img src="https://placeimg.com/250/250/people" alt="" />
  </div>
  <div class="content">
    <blockquote class="alt">Lorem ipsum dolor sit amet, consectetur adipiscing elit et. Nullam vulputate ni quam vite orci aliquet, non adipiscing lorem quin sollicitudin.</blockquote>
      <p class="read-more">Read more about <a href="" class="more">Sam's Experience</a></p>
  </div>
</div>

2.14 Events - Sidebar

Show/hide markup
<div class="components events-sidebar">
  <div class="event-listings">
  <h2>Upcoming Events</h2>
    <div class="event">
      <div class="event-date">
        <span class="month">Mar </span><span class="day">27 </span><span class="year">2014</span>
      </div>
      <div class="event-details">
        <p class="label">In-person</p>
        <p class="headline"><a href="" class="more">Facebook Chat with an EducationUSA Advisor @ Facebook.com/EducationUSADelhi lorum ipsum</a></p>
        <p><span class="label">For</span> <a href="">U.S. Higher Education Professionals</a></p>
        <p><span class="label">Location</span> <a href="">Armenia</a></p>
      </div>
    </div>
    <div class="event">
      <div class="event-date">
        <span class="month">Apr </span><span class="day">14 </span><span class="year">2014</span>
      </div>
      <div class="event-details">
        <p class="label">In-person</p>
        <p class="headline"><a href="" class="more">Step 4: Apply for your Student Visa</a></p>
        <p><span class="label">For</span> <a href="">International Students</a></p>
        <p><span class="label">Location</span> <a href="">Online</a></p>
      </div>
    </div>
    <div class="more-events"><a href="" class="more">View more</a></div>
  </div>
</div>