There are no notes for this item.

Viewbook

Component Preview
<header class="iowa-bar iowa-bar--narrow" data-uids-header>
      <div class="iowa-bar__container">
          <div class="logo logo--tab">
              <a href="https://www.uiowa.edu">
                  <div class="element-invisible">The University of Iowa</div>
                  <svg xmlns="http://www.w3.org/2000/svg" class="logo-icon" aria-labelledby="logo-header" role="img" viewBox="0 0 311.6 90.2">
                      <path class="st0" d="M40 18.8h-7.3v52.4H40v19H0v-19h7.3V18.8H0V0h40V18.8z" />
                      <path class="st0" d="M93.8 90.2h-29c-10.5 0-17.4-6.9-17.4-18.2V18.2C47.4 7 54.4 0 64.8 0h29c10.5 0 17.4 7 17.4 18.2V72C111.2 83.2 104.2 90.2 93.8 90.2zM85.6 71.2V18.8H73v52.4H85.6z" />
                      <path class="st0" d="M122.6 18.8h-6.4V0h38v18.9H147l6.5 43.4L167 0h19.2l14.4 62.3 5.2-43.4h-6.6V0h37.5v18.9h-6.2l-11.3 71.4h-30.6l-11.8-53.2 -12.1 53.1h-29.4L122.6 18.8z" />
                      <path class="st0" d="M230.1 71.2h6.9L250.7 0h41l13.5 71.2h6.4v19H281l-2.9-22h-15.2l-2.7 22h-30L230.1 71.2 230.1 71.2zM276.5 51.7l-5.8-36.4 -6 36.4H276.5z" />
                      <image src="../../assets/images/uiowa-primary.png">
                          <title id="logo-header">University of Iowa</title>
                      </image>
                  </svg>
              </a>
          </div>
      </div>
  </header>
  <div class="v-dots-scroll-spacer">
      <div class="v-dots-scroll-target" id="hero-banner"></div>
  </div>

  <div class="banner gradient-center banner--large  banner--vertical-center banner--horizontal-center">
      <div class="banner__image">
          <img src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/pano.jpg" alt="Alt Text">
      </div>

      <div class="banner__container">
          <div class="banner__content">

              <h2 class="headline headline--uppercase">
                  <span class="headline__text"><span>Welcome</span> to Iowa</span>
              </h2>

              <div class="banner__text"></div>

          </div>
      </div>

  </div>

  <div data-uids-cta="data-uids-cta" role="region" class="cta-row__wrapper">
      <div class="cta-row__container">
          <nav role="navigation">
              <ul class="menu">

                  <li class="menu-item">
                      <a href="https://admissions.uiowa.edu/apply/first-year-student-application-process" class="bttn bttn--outline bttn--tertiary bttn--transparent bttn--caps bttn--apply">Apply Now</a>
                  </li>

                  <li class="menu-item">
                      <a href="https://admissions.uiowa.edu/visit-campus" class="bttn bttn--outline bttn--tertiary bttn--transparent bttn--caps bttn--visit">Schedule a Visit</a>
                  </li>

                  <li class="menu-item">
                      <a href="https://admissions.uiowa.edu/contact-us" class="bttn bttn--outline bttn--tertiary bttn--transparent bttn--caps bttn--ask">Contact Us</a>
                  </li>

                  <li class="menu-item">
                      <a href="https://www.maui.uiowa.edu/maui/pub/admissions/webinquiry/undergraduate.page" class="bttn bttn--outline bttn--tertiary bttn--transparent bttn--caps bttn--connect">Request Information</a>
                  </li>
              </ul>
          </nav>
      </div>
  </div>

  <nav id="vertical-dots" role="navigation" aria-label="Navigation">
      <ul>
          <li>
              <a class="v-dot-link" href="#banner-banner" aria-labelledby="v-dot-nav-section-1" data-section=banner-banner>
                  <span id="v-dot-nav-section-1">Back to Top</span>
                  <i class="fas fa-arrow-up"></i>
              </a>
          </li>
          <li>
              <a class="v-dot-link" href="#areas-of-study" aria-labelledby="v-dot-nav-section-2" data-section=areas-of-study>
                  <span id="v-dot-nav-section-2">Areas of Study</span>
              </a>
          </li>
          <li>
              <a class="v-dot-link" href="#academic-opportunities" aria-labelledby="v-dot-nav-section-3" data-section=academic-opportunities>
                  <span id="v-dot-nav-section-3">Acdemic Opportunities</span>
              </a>
          </li>
          <li>
              <a class="v-dot-link" href="#iowa-city" aria-labelledby="v-dot-nav-section-4" data-section=iowa-city>
                  <span id="v-dot-nav-section-4">Iowa City</span>
              </a>
          </li>
          <li>
              <a class="v-dot-link" href="#student-life" aria-labelledby="v-dot-nav-section-5" data-section=student-life>
                  <span id="v-dot-nav-section-5">Student Life</span>
              </a>
          </li>
          <li>
              <a class="v-dot-link" href="#student-outcomes" aria-labelledby="v-dot-nav-section-6" data-section=student-outcomes>
                  <span id="v-dot-nav-section-6">Student Outcomes</span>
              </a>
          </li>
          <li>
              <a class="v-dot-link" href="#apply" aria-labelledby="v-dot-nav-section-7" data-section=apply>
                  <span id="v-dot-nav-section-7">How to Apply</span>
              </a>
          </li>
      </ul>
  </nav>
  <div class="v-dots-scroll-spacer">
      <div class="v-dots-scroll-target" id="areas-of-study"></div>
  </div>

  <div class="grid-panel grid-panel--asymmetrical">

      <div class="grid-panel__column-content-left grid-panel__content">

          <h2 class="headline headline--uppercase">
              <span class="headline__text">200+ Areas<br /> of Study</span>
          </h2>

          <p>Iowa offers over 200 majors, minors and certificates. Students are encouraged to work across disciplines to find their passion. If you are unsure of what you’d like to study at Iowa, look at an&nbsp;<a data-cke-saved-href="https://admissions.uiowa.edu/academics/open-major" href="https://admissions.uiowa.edu/academics/open-major">open major</a>, or take our&nbsp;<a data-cke-saved-href="http://uiowa.mymajors.com/" href="http://uiowa.mymajors.com/">MyMajors assessment</a>&nbsp;to explore possible majors based on your interests and strengths.</p>
          <a href="" class="bttn ">

          </a>

      </div>

      <div class="grid-panel__column-image-right">

          <div class="grid--threecol--33-34-33">
              <div class="list-container">

                  <div class="banner solid-opacity banner--small banner--row banner--vertical-bottom banner--horizontal-left click-container">
                      <div class="banner__image">
                          <img src="../../assets/images/viewbook/areas/1.jpg" alt="Alt Text">
                      </div>

                      <div class="banner__container">
                          <div class="banner__content">

                              <h2 class="headline headline headline--uppercase headline--highlight">
                                  <a href="https://admissions.uiowa.edu/academics/biz-econ-mgmt" aria-describedby="desc-a-card" class="click-target">
                                      <span class="headline__text">Business, economics, and management</span>
                                  </a>
                              </h2>

                              <div class="banner__text"></div>

                              <div class="banner__action">
                              </div>

                          </div>
                      </div>

                  </div>

                  <div class="banner solid-opacity banner--small banner--row banner--vertical-bottom banner--horizontal-left click-container">
                      <div class="banner__image">
                          <img src="../../assets/images/viewbook/areas/2.jpg" alt="Alt Text">
                      </div>

                      <div class="banner__container">
                          <div class="banner__content">

                              <h2 class="headline headline headline--uppercase headline--highlight">
                                  <a href="https://admissions.uiowa.edu/academics/edu" aria-describedby="desc-a-card" class="click-target">
                                      <span class="headline__text">Education</span>
                                  </a>
                              </h2>

                              <div class="banner__text"></div>

                              <div class="banner__action">
                              </div>

                          </div>
                      </div>

                  </div>

                  <div class="banner solid-opacity banner--small banner--row banner--vertical-bottom banner--horizontal-left click-container">
                      <div class="banner__image">
                          <img src="../../assets/images/viewbook/areas/3.jpg" alt="Alt Text">
                      </div>

                      <div class="banner__container">
                          <div class="banner__content">

                              <h2 class="headline headline headline--uppercase headline--highlight">
                                  <a href="https://admissions.uiowa.edu/academics/engr-comp" aria-describedby="desc-a-card" class="click-target">
                                      <span class="headline__text">Engineering and computing</span>
                                  </a>
                              </h2>

                              <div class="banner__text"></div>

                              <div class="banner__action">
                              </div>

                          </div>
                      </div>

                  </div>

                  <div class="banner solid-opacity banner--small banner--row banner--vertical-bottom banner--horizontal-left click-container">
                      <div class="banner__image">
                          <img src="../../assets/images/viewbook/areas/4.jpg" alt="Alt Text">
                      </div>

                      <div class="banner__container">
                          <div class="banner__content">

                              <h2 class="headline headline headline--uppercase headline--highlight">
                                  <a href="https://admissions.uiowa.edu/academics/health-sci" aria-describedby="desc-a-card" class="click-target">
                                      <span class="headline__text">Health sciences</span>
                                  </a>
                              </h2>

                              <div class="banner__text"></div>

                              <div class="banner__action">
                              </div>

                          </div>
                      </div>

                  </div>

                  <div class="banner solid-opacity banner--small banner--row banner--vertical-bottom banner--horizontal-left click-container">
                      <div class="banner__image">
                          <img src="../../assets/images/viewbook/areas/5.jpg" alt="Alt Text">
                      </div>

                      <div class="banner__container">
                          <div class="banner__content">

                              <h2 class="headline headline headline--uppercase headline--highlight">
                                  <a href="https://admissions.uiowa.edu/academics/lang-cult-soc" aria-describedby="desc-a-card" class="click-target">
                                      <span class="headline__text">Languages, culture, and society</span>
                                  </a>
                              </h2>

                              <div class="banner__text"></div>

                              <div class="banner__action">
                              </div>

                          </div>
                      </div>

                  </div>

                  <div class="banner solid-opacity banner--small banner--row banner--vertical-bottom banner--horizontal-left click-container">
                      <div class="banner__image">
                          <img src="../../assets/images/viewbook/areas/6.jpg" alt="Alt Text">
                      </div>

                      <div class="banner__container">
                          <div class="banner__content">

                              <h2 class="headline headline headline--uppercase headline--highlight">
                                  <a href="https://admissions.uiowa.edu/academics/life-nat-sci" aria-describedby="desc-a-card" class="click-target">
                                      <span class="headline__text">Life and natural sciences</span>
                                  </a>
                              </h2>

                              <div class="banner__text"></div>

                              <div class="banner__action">
                              </div>

                          </div>
                      </div>

                  </div>

                  <div class="banner solid-opacity banner--small banner--row banner--vertical-bottom banner--horizontal-left click-container">
                      <div class="banner__image">
                          <img src="../../assets/images/viewbook/areas/7.jpg" alt="Alt Text">
                      </div>

                      <div class="banner__container">
                          <div class="banner__content">

                              <h2 class="headline headline headline--uppercase headline--highlight">
                                  <a href="https://admissions.uiowa.edu/academics/math-quant-sci" aria-describedby="desc-a-card" class="click-target">
                                      <span class="headline__text">Math and quantitative sciences</span>
                                  </a>
                              </h2>

                              <div class="banner__text"></div>

                              <div class="banner__action">
                              </div>

                          </div>
                      </div>

                  </div>

                  <div class="banner solid-opacity banner--small banner--row banner--vertical-bottom banner--horizontal-left click-container">
                      <div class="banner__image">
                          <img src="../../assets/images/viewbook/areas/8.jpg" alt="Alt Text">
                      </div>

                      <div class="banner__container">
                          <div class="banner__content">

                              <h2 class="headline headline headline--uppercase headline--highlight">
                                  <a href="https://admissions.uiowa.edu/academics/preprofessional" aria-describedby="desc-a-card" class="click-target">
                                      <span class="headline__text">Preprofessional programs</span>
                                  </a>
                              </h2>

                              <div class="banner__text"></div>

                              <div class="banner__action">
                              </div>

                          </div>
                      </div>

                  </div>

                  <div class="banner solid-opacity banner--small banner--row banner--vertical-bottom banner--horizontal-left click-container">
                      <div class="banner__image">
                          <img src="../../assets/images/viewbook/areas/9.jpg" alt="Alt Text">
                      </div>

                      <div class="banner__container">
                          <div class="banner__content">

                              <h2 class="headline headline headline--uppercase headline--highlight">
                                  <a href="https://admissions.uiowa.edu/academics/soc-sci-pol" aria-describedby="desc-a-card" class="click-target">
                                      <span class="headline__text">Social sciences and policy</span>
                                  </a>
                              </h2>

                              <div class="banner__text"></div>

                              <div class="banner__action">
                              </div>

                          </div>
                      </div>

                  </div>

                  <div class="banner solid-opacity banner--small banner--row banner--vertical-bottom banner--horizontal-left click-container">
                      <div class="banner__image">
                          <img src="../../assets/images/viewbook/areas/10.jpg" alt="Alt Text">
                      </div>

                      <div class="banner__container">
                          <div class="banner__content">

                              <h2 class="headline headline headline--uppercase headline--highlight">
                                  <a href="https://admissions.uiowa.edu/academics/vis-perf-arts" aria-describedby="desc-a-card" class="click-target">
                                      <span class="headline__text">Visual and performing arts</span>
                                  </a>
                              </h2>

                              <div class="banner__text"></div>

                              <div class="banner__action">
                              </div>

                          </div>
                      </div>

                  </div>

                  <div class="banner solid-opacity banner--small banner--row banner--vertical-bottom banner--horizontal-left click-container">
                      <div class="banner__image">
                          <img src="../../assets/images/viewbook/areas/11.jpg" alt="Alt Text">
                      </div>

                      <div class="banner__container">
                          <div class="banner__content">

                              <h2 class="headline headline headline--uppercase headline--highlight">
                                  <a href="https://admissions.uiowa.edu/academics/write-comm-media" aria-describedby="desc-a-card" class="click-target">
                                      <span class="headline__text">Writing, communications, literature, and media</span>
                                  </a>
                              </h2>

                              <div class="banner__text"></div>

                              <div class="banner__action">
                              </div>

                          </div>
                      </div>

                  </div>

                  <div class="banner solid-opacity banner--small banner--row bg-pattern--brain-black banner--vertical-bottom banner--horizontal-left click-container">

                      <div class="banner__container">
                          <div class="banner__content">

                              <div class="banner__text"></div>

                              <div class="banner__action">
                                  <div aria-hidden="true" class="bttn bttn--secondary bttn--caps" id="desc-a-card">
                                      Browse by Major
                                      <i class="fas fa-arrow-right"></i>
                                  </div>
                              </div>

                          </div>
                      </div>

                  </div>
              </div>
          </div>

      </div>
  </div>

  <div class="v-dots-scroll-spacer">
      <div class="v-dots-scroll-target" id="academic-opportunities"></div>
  </div>

  <div class="grid-panel grid-panel--asymmetrical">

      <div class="grid-panel__column-image-left">

          <img class="grid-panel__img" src="../../assets/images/viewbook/sections/0315.jpg" alt="Alt Text" />

      </div>

      <div class="grid-panel__column-content-right grid-panel__content">

          <h2 class="headline headline--uppercase">
              <span class="headline__text">We Work <span>Together</span></span>
          </h2>

          <p>The University of Iowa blends big-school opportunities with close, personal support to help you excel. We remove the barriers between arts and science, between students and faculty—but most of all, between you and anything you’d like to explore.</p>
          <p>How many universities have both a state-of-the-art children’s hospital and a 3,883-pipe Klais organ? Or helped build the Voyager I satellite and the very first creative writing degree program? Just one: Iowa.</p>
          <a href="" class="bttn ">

          </a>

      </div>
  </div>

  <div class="stat__wrapper bg--black">

      <div class="stat__grid stat--horizontal">
          <div>
              <h2 class="headline stat__title">
                  <span class="headline__prefix">#</span>
                  <span class="headline__text">34</span>
              </h2>
          </div>
          <p class="stat__description">BEST PUBLIC UNIVERSITY BY U.S. NEWS & WORLD REPORT</p>
          <p class="stat__content">Among the top 2% of universities worldwide.</p>
      </div>

      <style>
          .stat__grid.stat--horizontal {
              padding: 3rem;
          }
      </style>
      <div class="stat__grid stat--horizontal">
          <div>
              <h2 class="headline stat__title">
                  <span class="headline__text">15:1</span>
              </h2>
          </div>
          <p class="stat__description">STUDENT-TO-FACULTY<br /> RATIO</p>
          <p class="stat__content">Get to know your professors.</p>
      </div>

      <style>
          .stat__grid.stat--horizontal {
              padding: 3rem;
          }
      </style>
      <div class="stat__grid stat--horizontal">
          <div>
              <h2 class="headline stat__title">
                  <span class="headline__text">23</span>
              </h2>
          </div>
          <p class="stat__description">INTERNATIONAL FULBRIGHT<br /> SCHOLARS IN 2020</p>
          <p class="stat__content">That’s the same as some Ivy League schools.</p>
      </div>

      <style>
          .stat__grid.stat--horizontal {
              padding: 3rem;
          }
      </style>
      <div class="stat__grid stat--horizontal">
          <div>
              <h2 class="headline stat__title">
                  <span class="headline__text">1 in 3</span>
              </h2>
          </div>
          <p class="stat__description">UNDERGRADS PARTICIPATE IN RESEARCH</p>
          <p class="stat__content">Gain experience now.</p>
      </div>

      <style>
          .stat__grid.stat--horizontal {
              padding: 3rem;
          }
      </style>

  </div>

  <div class="v-dots-scroll-spacer">
      <div class="v-dots-scroll-target" id="iowa-city"></div>
  </div>
  <div class="aerial aerial__grid">

      <div class="aerial__image">
          <img class="aerial__img" src="../../assets/images/viewbook/sections/12.jpg" alt="Alt Text">
      </div>
      <div class="aerial__container">
          <div class="aerial__content aerial__content-grid">

              <div class="highlight__wrapper">

                  <h3 class="headline highlight__title">
                      <span class="headline__text">World-class hospital</span>
                  </h3>

                  <div class="highlight__sub">
                      <span> A nationally ranked, comprehensive medical center is just a short walk away.</span>
                  </div>

              </div>

              <div class="highlight__wrapper">

                  <h3 class="headline highlight__title">
                      <span class="headline__text">Best college town</span>
                  </h3>

                  <div class="highlight__sub">
                      <span>Named the #1 Best College Town by reviews.org, Iowa City seamlessly blends a vibrant downtown with the heart of campus.</span>
                  </div>

              </div>

              <div class="highlight__wrapper">

                  <h3 class="headline highlight__title">
                      <span class="headline__text">Easy to get around</span>
                  </h3>

                  <div class="highlight__sub">
                      <span> Whether you like to walk, bike, or take the free bus system, residence halls are closely located to the center of campus and downtown Iowa City.</span>
                  </div>

              </div>

              <h2 class="headline headline--uppercase">
                  <span class="headline__text">Welcome Home</span>
              </h2>

              <div class="highlight__wrapper">

                  <h3 class="headline highlight__title">
                      <span class="headline__text">Big ten athletics</span>
                  </h3>

                  <div class="highlight__sub">
                      <span>Seating nearly 70,000, Kinnick Stadium is home to Hawkeye Football, just one of the 24 NCAA teams at Iowa.</span>
                  </div>

              </div>
          </div>

      </div>

  </div>

  <div class="v-dots-scroll-spacer">
      <div class="v-dots-scroll-target" id="student-life"></div>
  </div>

  <div class="grid-panel grid-panel--asymmetrical">

      <div class="grid-panel__column-content-left grid-panel__content">

          <h2 class="headline headline--uppercase">
              <span class="headline__text">Make <span>30,000</span> New Friends</span>
          </h2>

          <p>Big Ten athletics, theaters, music venues, 500+ student groups, community organizations, student philanthropy, hiking trails, bike paths, workout facilities, hundreds of restaurants and coffee shops and food carts and—you get the idea. There’s a lot to do in Iowa City. Every club, event, and activity is an opportunity to make new connections and find your own close-knit community on campus.</p>
          <a href="" class="bttn ">

          </a>

      </div>

      <div class="grid-panel__column-image-right">

          <img class="grid-panel__img" src="../../assets/images/viewbook/sections/1304.jpg" alt="Alt Text" />

      </div>
  </div>

  <div class="stat__wrapper  bg--black">

      <div class="stat__grid stat--horizontal">
          <div>
              <h2 class="headline stat__title">
                  <span class="headline__text">500</span>
                  <span class="headline__suffix">+</span>
              </h2>
          </div>
          <p class="stat__description">STUDENT<br /> ORGANIZATIONS</p>
          <p class="stat__content">Or, start your own.</p>
      </div>

      <style>
          .stat__grid.stat--horizontal {
              padding: 3rem;
          }
      </style>
      <div class="stat__grid stat--horizontal">
          <div>
              <h2 class="headline stat__title">
                  <span class="headline__text">100</span>
                  <span class="headline__suffix">+</span>
              </h2>
          </div>
          <p class="stat__description">RESTAURANTS AND<br /> CAFÉS</p>
          <p class="stat__content">From vegan brunch to pie shakes.</p>
      </div>

      <style>
          .stat__grid.stat--horizontal {
              padding: 3rem;
          }
      </style>
      <div class="stat__grid stat--horizontal">
          <div>
              <h2 class="headline stat__title">
                  <span class="headline__text">400</span>
                  <span class="headline__suffix">+</span>
              </h2>
          </div>
          <p class="stat__description">ARTS PERFORMANCES Available EACH YEAR</p>
          <p class="stat__content">For $5 or less.</p>
      </div>

      <style>
          .stat__grid.stat--horizontal {
              padding: 3rem;
          }
      </style>
      <div class="stat__grid stat--horizontal">
          <div>
              <h2 class="headline stat__title">
                  <span class="headline__text">24</span>
              </h2>
          </div>
          <p class="stat__description">NCAA DIVISION I<br /> TEAMS</p>
          <p class="stat__content">There’s nothing like a Hawkeye game.</p>
      </div>

      <style>
          .stat__grid.stat--horizontal {
              padding: 3rem;
          }
      </style>
  </div>

  <div class="v-dots-scroll-spacer">
      <div class="v-dots-scroll-target" id="student-outcomes"></div>
  </div>

  <div class="grid-panel grid-panel--asymmetrical">

      <div class="grid-panel__column-image-left">

          <img class="grid-panel__img" src="../../assets/images/viewbook/sections/1961.jpg" alt="Alt Text" />

      </div>

      <div class="grid-panel__column-content-right grid-panel__content">

          <h2 class="headline headline--uppercase">
              <span class="headline__text">Make an <span>Impact</span></span>
          </h2>

          <p>Having big ideas isn’t enough—to excel in any career, you need to know how to share them and make them real. Iowa’s leadership in the study and craft of writing helps every Hawkeye learn communication skills that give them an edge. Dedicated career advising, thousands of on-campus job interviews, and countless opportunities for hands-on learning make Iowa grads stand out.</p>
          <a href="" class="bttn ">

          </a>

      </div>
  </div>

  <div class="stat__wrapper  bg--black">

      <div class="stat__grid stat--horizontal">
          <div>
              <h2 class="headline stat__title">
                  <span class="headline__text">95</span>
                  <span class="headline__suffix">%</span>
              </h2>
          </div>
          <p class="stat__description">OVERALL JOB/GRADUATE SCHOOL PLACEMENT RATE</p>
          <p class="stat__content">Business <strong>97%</strong><br />Education <strong>91%</strong><br />Engineering <strong>96%</strong><br /> Liberal Arts and Sciences <strong>94%</strong><br /> Nursing <strong>99%</strong><br />Pharmacy <strong>97%</strong></p>
      </div>

      <style>
          .stat__grid.stat--horizontal {
              padding: 3rem;
          }
      </style>
      <div class="stat__grid stat--horizontal">
          <div>
              <h2 class="headline stat__title">
                  <span class="headline__text">4,000</span>
                  <span class="headline__suffix">+</span>
              </h2>
          </div>
          <p class="stat__description">STUDENT<br /> INTERNSHIPS</p>
          <p class="stat__content">Everywhere from NASA to the Minnesota Vikings.</p>
      </div>

      <style>
          .stat__grid.stat--horizontal {
              padding: 3rem;
          }
      </style>
      <div class="stat__grid stat--horizontal">
          <div>
              <h2 class="headline stat__title">
                  <span class="headline__text">4,100</span>
                  <span class="headline__suffix">+</span>
              </h2>
          </div>
          <p class="stat__description">Employers have hired Iowa Graduates the past three years</p>
          <p class="stat__content">Gain real-world skills that make résumés stand out.</p>
      </div>

      <style>
          .stat__grid.stat--horizontal {
              padding: 3rem;
          }
      </style>
      <div class="stat__grid stat--horizontal">
          <div>
              <h2 class="headline stat__title">
                  <span class="headline__text">1,316</span>
                  <span class="headline__suffix">+</span>
              </h2>
          </div>
          <p class="stat__description">STUDENTS STUDIED ABROAD LAST YEAR</p>
          <p class="stat__content">Spanning the globe in 69 countries.</p>
      </div>

      <style>
          .stat__grid.stat--horizontal {
              padding: 3rem;
          }
      </style>
  </div>

  <div class="v-dots-scroll-spacer">
      <div class="v-dots-scroll-target" id="apply"></div>
  </div>

  <div class="grid-panel grid-panel--split">

      <div class="grid-panel__column grid-panel__content">

          <h2 class="headline headline--uppercase">
              <span class="headline__text">How to Apply</span>
          </h2>

          <a href="" class="bttn ">

          </a>

          <ol class="element--circle-list">
              <li>
                  <h3 class="headline headline--serif headline--underline">
                      <span class="headline__text">Complete the required high school courses.</span>
                  </h3>

                  <p>
                      <a href="https://admissions.uiowa.edu/academics-undergraduate-programs-undergraduate/minimum-high-school-course-requirements" class="bttn bttn--secondary bttn--caps">

                          View High School Course Requirements
                          <i class="fas fa-arrow-right"></i>
                      </a>
                  </p>

              </li>
              <li>

                  <h3 class="headline headline--serif headline--underline">
                      <span class="headline__text">Your Regent Admission Index Score.</span>

                  </h3>

                  <p>Score 245 or higher (residents), 255 or higher (nonresidents) on the Regent Admission Index. The Regent Admission Index (RAI) is a formula used by all Iowa public universities to make admission a simpler, more streamlined process. To calculate your RAI score, use the applicable formula below.
                  </p>

                  <p>
                      <strong>RAI FORMULA:</strong>
                  </p>
                  <ul>
                      <li>3 x ACT composite score or SAT equivalent</li>
                      <li>+ 30 x cumulative GPA</li>
                      <li>+ 5 x years of high school core courses complete</li>
                  </ul>

                  <p>
                      <a href="https://admissions.uiowa.edu/rai" class="bttn bttn--secondary bttn--caps">

                          Calculate your RAI score
                          <i class="fas fa-arrow-right"></i>
                      </a>
                  </p>

                  <p>
                      <strong>ACT and SAT Test Scores:</strong>
                  </p>
                  <p>We understand that COVID-19 has caused limited access to ACT and SAT tests. Any academic disruptions you have experienced will not keep you from being considered for admission at the University of Iowa. We encourage you to apply for admission even if you do not have a test score. An individual review process will be used to make an initial admission decision for students who do not self-report a test score as part of their application. This temporary exemption by the Iowa Board of Regents removes the testing requirement for Fall 2021 applicants.</p>

                  <p>
                      <a href="https://admissions.uiowa.edu/testing" class="bttn bttn--secondary bttn--caps">

                          View Testing
                          <i class="fas fa-arrow-right"></i>
                      </a>
                  </p>

              </li>

              <li>

                  <h3 class="headline headline--serif headline--underline">
                      <span class="headline__text">Meet the admission requirements for your college of choice.</span>

                  </h3>

                  <p>Admission requirements vary for each college that accepts first-year students.</p>

                  <ul>
                      <li>College of Liberal Arts and Sciences</li>
                      <li>Tippie College of Business
                          <em>(direct admission)</em>
                      </li>
                      <li>College of Education
                          <em>(direct admission to the Elementary Teacher Education Program)</em>
                      </li>

                      <li>College of Engineering
                          <em>(direct admission)</em>
                      </li>

                      <li>College of Nursing
                          <em>(direct admission)</em>
                      </li>
                      <li>College of Pharmacy
                          <em>(assured admission)</em>
                      </li>

                      <li>College of Public Health
                          <em>(direct admission)</em>
                      </li>
                  </ul>

                  <p>
                      <small>
                          <em>Students who do not meet all direct admission requirements for their specific college will be carefully considered on a case-by-case basis. Those who are not directly admitted to their desired college begin school as a CLAS student, applying to
                              their college of choice after completing prerequisite courses and earning a minimum GPA.</em>
                      </small>
                  </p>
                  <p>
                      <small>
                          <em>Colleges that do not accept first-year students directly include: Dentistry, Law, Pharmacy, Medicine, and the Graduate College.</em>
                      </small>
                  </p>

                  <p>
                      <a href="https://admissions.uiowa.edu/academics/first-year-admission" class="bttn bttn--secondary bttn--caps">
                          View Requirements
                          <i class="fas fa-arrow-right"></i>
                      </a>
                  </p>

              </li>

          </ol>

      </div>

      <div class="grid-panel__column grid-panel__content">

          <ol class="element--circle-list counter-increment">
              <li>
                  <h3 class="headline headline--serif headline--underline">
                      <span class="headline__text">Submit your FAFSA and explore financial aid.</span>
                  </h3>
                  <hr class="element--spacer-separator" />
                  <table class="table is-striped">
                      <caption class="element-invisible">Finances</caption>
                      <thead>
                          <tr>
                              <th>Finances</th>
                              <th>Cost</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr>
                              <td><strong>Iowa residents</strong></td>
                              <td>
                                  <strong>$9,830*</strong>
                              </td>
                              </td>
                          </tr>
                          <tr>
                              <td><strong>Nonresidents</strong></td>
                              <td>
                                  <strong>$31,793*</strong>
                              </td>
                              </td>
                          </tr>
                          <tr>
                              <td><strong>Standard housing and meal plans</strong></td>
                              <td>
                                  <strong>$11,590 **</strong>
                              </td>
                          </tr>
                      </tbody>
                  </table>

                  <p>
                      <small>* Tuition and fees vary by academic program. Tuition and fees listed include a one-time University Records and Documents Fee of $225 for new students.<br />** Based on a weighted room average and unlimited (Gold) meal plan</small>

                  </p>

                  <p>
                      <a href="http://financialaid.uiowa.edu" class="bttn bttn--secondary bttn--caps">

                          Financial Aid
                          <i class="fas fa-arrow-right"></i>
                      </a>
                  </p>
                  <p>Submit the
                      <strong>Free Application for Federal Student Aid (FAFSA)</strong>
                      early to maximize your available assistance.</p>

                  <p>
                      <a href="https://admissions.uiowa.edu/finances/scholarships" class="bttn bttn--secondary bttn--caps">

                          Scholarships
                          <i class="fas fa-arrow-right"></i>
                      </a>
                  </p>
                  <p>We offer a wide variety of scholarships and grants.</p>

              </li>

              <li>

                  <h3 class="headline headline--serif headline--underline">
                      <span class="headline__text">Apply for housing and dining.</span>
                  </h3>

                  <p>Access the housing application through your admissions profile on
                      <a data-cke-saved-href="https://myui.uiowa.edu" href="https://myui.uiowa.edu">myui.uiowa.edu</a>
                      and pay the nonrefundable $75 housing application fee.
                      <br></p>
                  <p>We have a number of housing options available to suit your ideal student experience. We strongly recommend applying for housing early. Assignments are made on a first-come, first-served basis. Apply by May 3, 2021 for the opportunity to request a roommate and select your room.</p>

                  </p>

                  <p>
                      <a href="http://housing.uiowa.edu" class="bttn bttn--secondary bttn--caps">

                          Housing Information
                          <i class="fas fa-arrow-right"></i>
                      </a>
                  </p>

                  <p>
                      <a href="http://dining.uiowa.edu" class="bttn bttn--secondary bttn--caps">
                          Dining Information
                          <i class="fas fa-arrow-right"></i>
                      </a>
                  </p>

              </li>

          </ol>

      </div>
  </div>

  <main></main>

  <div class="v-dots-scroll-spacer">
      <div class="v-dots-scroll-target" id="to-be-a-hawkeye"></div>
  </div>
  <div class="image-grid">
      <div class="image-grid__section">

          <img class="card__img" src="../../assets/images/viewbook/sections/0849.jpg" alt="Alt Text">
      </div>

      <div class="image-grid__section">

          <img class="card__img" src="../../assets/images/viewbook/sections/dorm.jpg" alt="Alt Text">
      </div>

      <div class="image-grid__section">

          <img class="card__img" src="../../assets/images/viewbook/sections/0297-Pano5.jpg" alt="Alt Text">
      </div>

      <div class="image-grid__section grid__content bg-pattern--brain-reversed">

          <h2 class="headline headline headline--uppercase">
              <span class="headline__text">Its <span>Great</span> to<br /> be a Hawkeye</span>
          </h2>

      </div>

      <div class="image-grid__section">

          <img class="card__img" src="../../assets/images/viewbook/sections/1152.jpg" alt="Alt Text">
      </div>

      <div class="image-grid__section">

          <img class="card__img" src="../../assets/images/viewbook/sections/0027.jpg" alt="Alt Text">
      </div>

  </div>

  <footer class="footer">
      <div class="footer__container footer__container--flex">
          <div class="footer__links footer__links--contact">

              <div class="logo logo--footer">
                  <a href="https://www.uiowa.edu">
                      <div class="element-invisible">The University of Iowa</div>
                      <svg xmlns="http://www.w3.org/2000/svg" class="logo-icon" aria-labelledby="logo-footer" role="img" viewBox="0 0 311.6 90.2">
                          <path class="st0" d="M40 18.8h-7.3v52.4H40v19H0v-19h7.3V18.8H0V0h40V18.8z" />
                          <path class="st0" d="M93.8 90.2h-29c-10.5 0-17.4-6.9-17.4-18.2V18.2C47.4 7 54.4 0 64.8 0h29c10.5 0 17.4 7 17.4 18.2V72C111.2 83.2 104.2 90.2 93.8 90.2zM85.6 71.2V18.8H73v52.4H85.6z" />
                          <path class="st0" d="M122.6 18.8h-6.4V0h38v18.9H147l6.5 43.4L167 0h19.2l14.4 62.3 5.2-43.4h-6.6V0h37.5v18.9h-6.2l-11.3 71.4h-30.6l-11.8-53.2 -12.1 53.1h-29.4L122.6 18.8z" />
                          <path class="st0" d="M230.1 71.2h6.9L250.7 0h41l13.5 71.2h6.4v19H281l-2.9-22h-15.2l-2.7 22h-30L230.1 71.2 230.1 71.2zM276.5 51.7l-5.8-36.4 -6 36.4H276.5z" />
                          <image src="../../assets/images/uiowa-primary.png">
                              <title id="logo-footer">University of Iowa</title>
                          </image>
                      </svg>
                  </a>
              </div>

              <p>Iowa City, Iowa 52242<br>
                  <a href="tel:319-335-3847"><i class="fas fa-phone"></i> 319-335-3847</a><br />
              </p>

              <div class="footer__links footer__links--icon">
                  <nav role="navigation">
                      <ul class="menu">

                          <li class="menu-item">
                              <a href="http://www.facebook.com/admissions.office"><i class="fab fa-facebook-square"></i><span class="link-text">Facebook</span></a>
                          </li>

                          <li class="menu-item">
                              <a href="http://instagram.com/iowaadmissions"><i class="fab fa-instagram"></i><span class="link-text">Instagram</span></a>
                          </li>

                          <li class="menu-item">
                              <a href="https://twitter.com/iowaadmissions"><i class="fab fa-twitter-square"></i><span class="link-text">Twitter</span></a>
                          </li>

                          <li class="menu-item">
                              <a href="http://www.youtube.com/uiowaadmissions"><i class="fab fa-youtube"></i><span class="link-text">Youtube</span></a>
                          </li>
                      </ul>
                  </nav>
              </div>

              <div class="socket">
                  <ul class="socket__menu">
                      <li>© 2023 The University of Iowa</li>
                      <li>
                          <a href="https://uiowa.edu/privacy">Privacy Notice</a>
                      </li>
                      <li>
                          <a href="https://opsmanual.uiowa.edu/community-policies/nondiscrimination-statement">UI Nondiscrimination Statement</a>
                      </li>
                      <li>
                          <a href="https://uiowa.edu/accessibility">Accessibility</a>
                      </li>
                      <li>
                          <a href="https://nativeamericancouncil.org.uiowa.edu">UI Indigenous Land Acknowledgement</a>
                      </li>
                  </ul>
              </div>

          </div>

      </div>
  </footer>
  • Content:
    .cta-row__container .menu,
    .menu-group__container .menu {
      list-style-type: none;
      padding: 0;
      margin: 0; }
      .cta-row__container .menu > li, .menu-group__container .menu > li {
        display: inline-block;
        list-style-type: none;
        margin: 0; }
    
    .page__container {
      margin: 0 1.25rem;
      position: relative; }
      @media (min-width: 84.375em) {
        .page__container {
          max-width: 81.875em;
          margin: 0 auto; } }
      .page__container--mixed {
        margin: 0 1.25rem;
        position: relative; }
        @media (min-width: 84.375em) {
          .page__container--mixed {
            max-width: 81.875em;
            margin: 0 auto; } }
    
    @media (min-width: 768px) {
      .flex__wrapper {
        flex-wrap: wrap;
        display: flex; } }
    
    .cta-row__wrapper,
    .menu-group__wrapper {
      background: var(--brand-primary);
      padding: 1.875rem 0;
      margin: 0; }
      @media (min-width: 84.375em) {
        .cta-row__wrapper,
        .menu-group__wrapper {
          position: fixed;
          bottom: 0;
          z-index: 100;
          width: 100%;
          box-shadow: 0px 0 10px rgba(0, 0, 0, 0.4); } }
      .cta-row__wrapper nav,
      .menu-group__wrapper nav {
        width: 100%; }
      @media (min-width: 768px) {
        .cta-row__wrapper .menu,
        .menu-group__wrapper .menu {
          display: flex; } }
      .cta-row__wrapper .menu li,
      .menu-group__wrapper .menu li {
        flex: 1;
        display: block; }
      .cta-row__wrapper .bttn--outline,
      .menu-group__wrapper .bttn--outline {
        border: 1px solid var(--brand-secondary);
        display: block; }
        @media (min-width: 768px) {
          .cta-row__wrapper .bttn--outline,
          .menu-group__wrapper .bttn--outline {
            flex: 1;
            display: block; } }
    
    .cta-row__container,
    .menu-group__container {
      margin: 0 1.25rem;
      position: relative;
      justify-content: space-between; }
      @media (min-width: 84.375em) {
        .cta-row__container,
        .menu-group__container {
          max-width: 81.875em;
          margin: 0 auto; } }
      @media (min-width: 768px) {
        .cta-row__container,
        .menu-group__container {
          display: flex; } }
      @media (min-width: 84.375em) {
        .cta-row__container,
        .menu-group__container {
          padding: 0; } }
    
    .cta-row__container .menu a,
    .menu-group__container .menu a {
      margin: 1.05rem 0;
      padding-top: 0.325rem; }
      @media (min-width: 768px) {
        .cta-row__container .menu a,
        .menu-group__container .menu a {
          margin: 0 1.05rem;
          height: 100%; } }
      .cta-row__container .menu a:before,
      .menu-group__container .menu a:before {
        content: ' ';
        background-repeat: no-repeat;
        background-size: 90%;
        width: 35px;
        height: 35px;
        display: inline-block;
        margin-bottom: -5px;
        margin-right: 5px; }
        @media (min-width: 768px) {
          .cta-row__container .menu a:before,
          .menu-group__container .menu a:before {
            display: block;
            margin: 0 auto; } }
        @media (min-width: 84.375em) {
          .cta-row__container .menu a:before,
          .menu-group__container .menu a:before {
            display: inline-block;
            margin: 0 5px -5px 0; } }
      .cta-row__container .menu a.bttn--apply:before,
      .menu-group__container .menu a.bttn--apply:before {
        background-image: url("../../assets/images/apply-01.svg"); }
      .cta-row__container .menu a.bttn--visit:before,
      .menu-group__container .menu a.bttn--visit:before {
        background-image: url("../../assets/images/location-01.svg"); }
      .cta-row__container .menu a.bttn--ask:before,
      .menu-group__container .menu a.bttn--ask:before {
        background-image: url("../../assets/images/ask-01-01.svg"); }
      .cta-row__container .menu a.bttn--connect:before,
      .menu-group__container .menu a.bttn--connect:before {
        background-image: url("../../assets/images/connect-01-01.svg"); }
    
    .cta-row__container > a:first-child,
    .menu-group__container > a:first-child {
      margin-left: 0; }
    
    .cta-row__container > a:last-child,
    .menu-group__container > a:last-child {
      margin-right: 0; }
    
    @media (min-width: 980px) {
      .card__wrapper {
        display: flex;
        flex-wrap: wrap; } }
    
    .card__row,
    .banner {
      flex: 0 0 50%;
      margin-bottom: 0rem; }
      @media (min-width: 980px) {
        .card__row,
        .banner {
          flex: 0 0 33.3%; } }
    
    @media (min-width: 768px) {
      .banner--row .bttn {
        margin-left: 1.25rem;
        margin-bottom: 1.25rem; } }
    
    .banner--row .headline {
      font-size: 1.2rem;
      text-align: center; }
      @media (min-width: 768px) {
        .banner--row .headline {
          margin-left: 1.25rem;
          text-align: left; } }
    
    .image-grid {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row-reverse; }
      @media (min-width: 84.375em) {
        .image-grid {
          display: grid;
          grid-template-columns: repeat(8, 1fr);
          grid-template-rows: repeat(4, 1fr);
          grid-column-gap: 0px;
          grid-row-gap: 0px;
          margin-bottom: -20px; } }
      .image-grid__section {
        flex-basis: 100%; }
      .image-grid .grid__content {
        padding: 0 3rem; }
      .image-grid__section:nth-child(1) {
        grid-area: 1 / 1 / 2 / 3;
        order: 1; }
      .image-grid__section:nth-child(2) {
        grid-area: 1 / 3 / 2 / 5;
        order: 2; }
      .image-grid__section:nth-child(3) {
        grid-area: 2 / 1 / 5 / 5;
        order: 3; }
      .image-grid__section:nth-child(4) {
        grid-area: 1 / 5 / 3 / 9;
        align-items: center;
        display: flex;
        order: 0;
        padding: 3rem; }
      .image-grid__section:nth-child(5) {
        grid-area: 3 / 5 / 5 / 7;
        order: 4; }
      .image-grid__section:nth-child(6) {
        grid-area: 3 / 7 / 5 / 9; }
    
    .image-grid__section.grid__content h2.headline .headline__text span {
      color: #fff;
      font-family: "amnestyscript";
      font-weight: normal;
      background: none;
      text-transform: lowercase;
      font-size: 7rem;
      display: contents; }
      @media (min-width: 84.375em) {
        .image-grid__section.grid__content h2.headline .headline__text span {
          font-size: 12.5rem; } }
    
    .image-grid__section.grid__content h2.headline {
      width: 100%;
      text-align: center; }
      @media (min-width: 980px) {
        .image-grid__section.grid__content h2.headline {
          font-size: calc(4em + 2.5vw);
          width: 100%; } }
      @media (min-width: 84.375em) {
        .image-grid__section.grid__content h2.headline {
          font-size: calc(4em + 3vw); } }
      @media (min-width: 106em) {
        .image-grid__section.grid__content h2.headline {
          font-size: calc(4em + 3vw); } }
    
    .aerial__content-grid {
      margin: 0 3rem; }
    
    .stat__wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 1rem 3rem;
      align-items: baseline; }
      .stat__wrapper:hover {
        transition-delay: 4s; }
      @media (min-width: 768px) {
        .stat__wrapper {
          padding: 0 3rem; } }
      .stat__wrapper .stat__grid.stat--horizontal {
        flex: 0 0 100%;
        padding: 1rem 0; }
        @media (min-width: 768px) {
          .stat__wrapper .stat__grid.stat--horizontal {
            flex: 0 0 50%;
            padding: 2rem 0; } }
        @media (min-width: 980px) {
          .stat__wrapper .stat__grid.stat--horizontal {
            flex: 0 0 25%; } }
    
    .element--circle-list.counter-increment {
      counter-reset: circle-counter 3; }
    
    .element--circle-list > li {
      margin-bottom: 3rem; }
    
    .banner.banner--solid-opacity:hover::before,
    .banner.banner--solid-opacity:focus::before {
      transform: translate(-50%, 0) scaleX(1); }
    
    .banner.banner--solid-opacity:hover:after,
    .banner.banner--solid-opacity:focus:after {
      background: rgba(0, 0, 0, 0.2); }
    
    .banner.banner--solid-opacity:before {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 100%;
      height: 4px;
      background-color: #FFF;
      transform-origin: center;
      transform: translate(-50%, 0) scaleX(0);
      transition: transform 0.3s ease-in-out;
      z-index: 1; }
    
    .header-sticky .iowa-bar {
      z-index: 3; }
    
    @media (min-width: 84.375em) {
      .footer {
        padding-bottom: 6rem; } }
    
    .banner--horizontal-left .bttn {
      margin: 0 auto; }
      @media (min-width: 980px) {
        .banner--horizontal-left .bttn {
          margin-right: auto;
          margin-left: 0; } }
    
    .grid--threecol--33-34-33 .list-container {
      gap: 0; }
    
    @media (min-width: 980px) {
      .grid-panel .banner--small .headline--highlight {
        font-size: 1.3rem; } }
    
  • URL: /components/raw/viewbook/viewbook.css
  • Filesystem Path: src/components/layouts/viewbook/viewbook.css
  • Size: 8.1 KB
  • Content:
    @import '../../../assets/scss/variables';
    @import '../../../assets/scss/utilities';
    
    .page__container {
      @include container-width;;
    
      &--mixed {
        @include container-width;;
      }
    }
    
    .flex__wrapper {
      @include breakpoint(sm) {
        flex-wrap: wrap;
        @include flexbox;
      }
    }
    
    
    // footer cta
    
    // cta
    
    .cta-row,
    .menu-group {
      &__wrapper {
        @include breakpoint(page-container) {
          position: fixed;
          bottom: 0;
          z-index: 100;
          width: 100%;
          box-shadow: 0px 0 10px rgba(0, 0, 0, 0.4);
        }
    
        background: $primary;
        padding: $lg 0;
        margin: 0;
    
        nav {
          width: 100%;
        }
    
        .menu {
          @include breakpoint(sm) {
            display: flex;
          }
    
          li {
            flex: 1;
            display: block;
          }
        }
    
        .bttn--outline {
          border: 1px solid $secondary;
          display: block;
    
          @include breakpoint(sm) {
            flex: 1;
            display: block;
          }
        }
      }
    
      &__container {
        @include container-width;;
        justify-content: space-between;
    
        @include breakpoint(sm) {
          display: flex;
        }
    
        @include breakpoint(page-container) {
          padding: 0;
        }
      }
    }
    
    .cta-row__container .menu,
    .menu-group__container .menu {
      @extend %no-ul-list;
    
      a {
        margin: $md 0;
    
        @include breakpoint(sm) {
          margin: 0 $md;
          height: 100%;
        }
    
        padding-top: $xsm;
    
        &:before {
          content: ' ';
          background-repeat: no-repeat;
          background-size: 90%;
          width: 35px;
          height: 35px;
          display: inline-block;
          margin-bottom: -5px;
          margin-right: 5px;
    
          @include breakpoint(sm) {
            display: block;
            margin: 0 auto;
          }
    
          @include breakpoint(page-container) {
            display: inline-block;
            margin: 0 5px -5px 0;
          }
        }
    
        &.bttn--apply:before {
          background-image: url("#{$imgpath}/apply-01.svg");
        }
    
        &.bttn--visit:before {
          background-image: url("#{$imgpath}/location-01.svg");
        }
    
        &.bttn--ask:before {
          background-image: url("#{$imgpath}/ask-01-01.svg");
        }
    
        &.bttn--connect:before {
          background-image: url("#{$imgpath}/connect-01-01.svg");
        }
      }
    }
    
    .cta-row__container>a:first-child,
    .menu-group__container>a:first-child {
      margin-left: 0;
    }
    
    .cta-row__container>a:last-child,
    .menu-group__container>a:last-child {
      margin-right: 0;
    }
    
    // Card row
    
    .card__wrapper {
      @include breakpoint(md) {
        display: flex;
        flex-wrap: wrap;
      }
    }
    
    .card__row,
    .banner {
      flex: 0 0 50%;
    
      @include breakpoint(md) {
        flex: 0 0 33.3%;
      }
    
      margin-bottom: 0rem;
    }
    
    .banner--row {
      .bttn {
    
        @include breakpoint(sm) {
          margin-left: $gutter;
          margin-bottom: $gutter;
        }
      }
    
      .headline {
        font-size: 1.2rem;
        text-align: center;
    
        @include breakpoint(sm) {
          margin-left: $gutter;
          text-align: left;
        }
      }
    }
    
    
    // Grid sections
    
    
    .image-grid {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row-reverse;
    
      @include breakpoint(page-container) {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        margin-bottom: -20px;
      }
    
      &__section {
        flex-basis: 100%;
      }
    
      .grid__content {
        padding: 0 3rem;
      }
    
      &__section:nth-child(1) {
        grid-area: 1 / 1 / 2 / 3;
        order: 1;
      }
    
      &__section:nth-child(2) {
        grid-area: 1 / 3 / 2 / 5;
        order: 2;
      }
    
      &__section:nth-child(3) {
        grid-area: 2 / 1 / 5 / 5;
        order: 3;
      }
    
      &__section:nth-child(4) {
        grid-area: 1 / 5 / 3 / 9;
        align-items: center;
        display: flex;
        order: 0;
        padding: 3rem;
      }
    
      &__section:nth-child(5) {
        grid-area: 3 / 5 / 5 / 7;
        order: 4;
      }
    
      &__section:nth-child(6) {
        grid-area: 3 / 7 / 5 / 9;
      }
    }
    
    .image-grid__section.grid__content h2.headline .headline__text span {
      color: #fff;
      font-family: $font-family-script;
      font-weight: normal;
      background: none;
      text-transform: lowercase;
      font-size: 7rem;
    
      display: contents;
    
      @include breakpoint(page-container) {
        font-size: 12.5rem;
      }
    }
    
    .image-grid__section.grid__content h2.headline {
      width: 100%;
    
      @include breakpoint(md) {
        font-size: calc(4em + 2.5vw);
        width: 100%;
      }
    
      @include breakpoint(page-container) {
        font-size: calc(4em + 3vw);
      }
    
      @include breakpoint(xlg) {
        font-size: calc(4em + 3vw);
      }
    
      text-align: center;
    }
    
    .aerial__content-grid {
      margin: 0 3rem;
    }
    
    
    // stats
    
    .stat__wrapper {
      &:hover {
        transition-delay: 4s;
      }
    
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 1rem 3rem;
      align-items: baseline;
    
      @include breakpoint(sm) {
        padding: 0 3rem;
      }
    
      .stat__grid.stat--horizontal {
        flex: 0 0 100%;
        padding: 1rem 0;
    
        @include breakpoint(sm) {
          flex: 0 0 50%;
          padding: 2rem 0;
        }
    
        @include breakpoint(md) {
          flex: 0 0 25%;
        }
      }
    }
    
    
    
    // How to apply section
    
    .element--circle-list.counter-increment {
      counter-reset: circle-counter 3;
    }
    
    .element--circle-list>li {
      margin-bottom: $desktop-width-gutter;
    }
    
    .banner.banner--solid-opacity:hover::before,
    .banner.banner--solid-opacity:focus::before {
      transform: translate(-50%, 0) scaleX(1);
    }
    
    .banner.banner--solid-opacity:hover:after,
    .banner.banner--solid-opacity:focus:after {
      background: rgba(0, 0, 0, 0.2);
    }
    
    .banner.banner--solid-opacity:before {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 100%;
      height: 4px;
      background-color: #FFF;
      transform-origin: center;
      transform: translate(-50%, 0) scaleX(0);
      transition: transform 0.3s ease-in-out;
      z-index: 1;
    }
    
    .header-sticky .iowa-bar {
      z-index: 3;
    }
    
    // footer
    
    .footer {
      @include breakpoint(page-container) {
        padding-bottom: 6rem;
      }
    }
    
    // Areas of Study Hero bttn
    .banner--horizontal-left .bttn {
      margin: 0 auto;
    
      @include breakpoint(md) {
        margin-right: auto;
        margin-left: 0;
      }
    }
    
    
    // Grid
    
    .grid--threecol--33-34-33 .list-container {
      gap: 0;
    }
    
    // Set heading size for small banner size
    .grid-panel {
      .banner--small {
        .headline--highlight {
          @include breakpoint(md) {
            font-size: 1.3rem;
          }
        }
      }
    }
    
  • URL: /components/raw/viewbook/viewbook.scss
  • Filesystem Path: src/components/layouts/viewbook/viewbook.scss
  • Size: 6.2 KB