Sample Code

Scope

  • tab layout to achieve design
  • accordion to adapt tab layout for small screens
  • use bootstrap utilities to switch between the two based on breakpoints
  • use svg for titles to match print, sr-only instead of alt text on title images for accessible titles

Visuals

Screenshot of the State, Nation, and World impact section of the redesigned Texas A&M Health website

Code


  <section id="geographic-reach" class="full-screen-height parallax-container">
    <div class="full-width parallax-full-bg" style="background-image: url('images/homepg/farm-bg.jpg');"
      data-src="images/homepg/farm-bg.jpg" aria-label="Sun setting in a field with a combine">
    </div>
    <div id="bg-white-geographic-reach-top" class="bg-white down-arrow-left">
      <div class="container">
        <div class="row">
          <div class="col text-center">
            <h2 class="section-heading">Impact on the state, nation and world</h2>
            <p class="lead mt-3 mb-5">
              Through a shared responsibility and steadfast commitment to transformational learning and discovery, we are uniquely positioned
              to solve the greatest challenges in health care for those here in Texas, across the country
              <span class="text-nowrap">and around the globe.</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div id="bg-white-geographic-reach-top-content">
    <!-- begin accordion for small screens -->
      <div id="snw-accordion" class="d-xs-block d-xl-none">
        <div class="row justify-content-center position-relative" id="accordion-box-snw">
          <div class="tabContent col-11 py-4">
            <div class="panel-group" id="snw-accordion-panel">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <div class="panel-title">
                    <a data-toggle="collapse" data-target="#collapseForState" aria-controls="collapseForState" aria-expanded="true">
                      <img class="img-fluid" src="images/graphics/state-min.svg" alt="">
                      <p class="sr-only">State</p>
                    </a>
                  </div>
                </div>
                <div id="collapseForState" class="panel-collapse collapse show" data-parent="#accordion-box-snw">
                  <div class="panel-body">
                    <div class="row" id="state">
                      <div class="col snw-text-accordion">
                        <p class="text-white snw-copy">
                          With campus locations and clinical affiliates spanning the state, we are structured for impact. Our model acts as a conduit for community-based research,
                          health education and disease prevention initiatives to improve lives within Texas’ 254 counties.
                        </p>
                        <div id="state-img" class="d-flex justify-content-center">
                          <div class="text-center pt-6 data-point mr-2 ml-2">
                            <p class="large-number">
                              360K+
                            </p>
                            <p class="data-point-copy">
                              annual direct contacts made through community outreach and education
                            </p>
                            <p class="cta-link">
                              <a class="ghost" href="/about/reach/state.html">See our state impact in action</a>
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <div class="panel-title">
                    <a data-toggle="collapse" data-target="#collapseforNation" aria-controls="collapseforNation" aria-expanded="false">
                      <img class="img-fluid" src="images/graphics/nation-min.svg" alt="">
                      <p class="sr-only">Nation</p>
                    </a>
                  </div>
                </div>
                <div id="collapseforNation" class="panel-collapse collapse" data-parent="#accordion-box-snw">
                  <div class="panel-body">
                    <div class="row justify-content-start" id="nation">
                      <div class="col snw-text-accordion">
                        <p class="text-white snw-copy">
                          We’re the home for leaders who are developing solutions to the seemingly impossible problems facing health care in the United States. Our community of
                          scholars are paving the way for smarter investments with greater returns and helping all Americans live better lives.
                        </p>
                        <div id="nation-img" class="d-flex justify-content-center">
                          <div class="text-center pt-7 data-point mr-2 ml-2">
                            <p class="large-number">
                              3,200
                            </p>
                            <p class="data-point-copy">
                              current health professions students ready to affect positive change across the United States
                            </p>
                            <p class="cta-link">
                              <a class="ghost" href="/about/reach/nation.html">See our national impact in action</a>
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <div class="panel-title">
                    <a data-toggle="collapse" data-target="#collapseForWorld" aria-controls="collapseForWorld" aria-expanded="false">
                      <img class="img-fluid" src="images/graphics/world-min.svg" alt="">
                      <p class="sr-only">World</p>
                    </a>
                  </div>
                </div>
                <div id="collapseForWorld" class="panel-collapse collapse" data-parent="#accordion-box-snw">
                  <div class="panel-body">
                    <div class="row justify-content-start" id="world">
                      <div class="col snw-text-accordion">
                        <p class="snw-copy">
                          Our students, educators and innovators work across international boundaries to improve the health of populations. Multiple partnerships and agreements
                          with universities throughout the world lay the groundwork for joint teaching, research and outreach programs. Students are also offered
                          unique experiences to expand academic horizons through global mission trips.
                        </p>
                        <div id="world-img" class="d-flex justify-content-center">
                          <div class="text-center pt-7 data-point mr-2 ml-2">
                            <p class="large-number">
                              475
                            </p>
                            <p class="data-point-copy">
                              patient encounters during a one-time, five-day interdisciplinary mission trip to Bolivia
                            </p>
                            <p class="cta-link">
                              <a class="ghost" href="/about/reach/world.html">See our global impact in action</a>
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div> 
          </div>
        </div>
      </div>
      <!-- end accordion for small screens -->

      <!-- begin tabs for large screens -->
      <div id="snw-tabs" class="d-none d-xl-block">
        <div id="snw-tabs-inner" class="container position-relative mt-10 mb-8 fade-in-on-visible delay-100 vivify fadeIn">
          <div class="row">
            <div class="col-6">
              <ul id="state-nation-world-tabs" class="nav nav-tabs flex-column" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" id="state-tab" data-toggle="tab" href="#state-content" role="tab" aria-controls="state-content" aria-selected="true">
                    <span class="sr-only">State</span>
                    <img src="images/graphics/state-min.svg" alt="">
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link fade-in-on-visible delay-250 vivify fadeIn" id="nation-tab" data-toggle="tab" href="#nation-content" role="tab" aria-controls="nation-content" aria-selected="false">
                    <span class="sr-only">Nation</span>
                    <img src="images/graphics/nation-min.svg" alt="">
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link fade-in-on-visible delay-500 vivify fadeIn" id="world-tab" data-toggle="tab" href="#world-content" role="tab" aria-controls="world-content" aria-selected="false">
                    <span class="sr-only">World</span>
                    <img src="images/graphics/world-min.svg" alt="">
                  </a>
                </li>
              </ul>
            </div>
            <div class="col-6">
              <div id="state-nation-world-content" class="tab-content text-white">
                <div class="tab-pane fade show active" id="state-content" role="tabpanel" aria-labelledby="state-tab">
                  <p class="text-white snw-copy">
                    With campus locations and clinical affiliates spanning the state, we are structured for impact. Our model acts as a conduit for community-based research, health education and disease prevention
                    initiatives to improve lives within Texas’ 254 counties.
                  </p>
                  <div class="d-flex justify-content pt-3">
                    <img class="mb-5 map-bg" src="images/graphics/texas-wt-transparent-min.svg"
                      alt="Shape of Texas with TAMHSC campuses, clinical locations, affiliates, community education and outreach marked">
                    <div class="data-point mr-2 ml-2">
                      <p class="large-number">
                        360K+
                      </p>
                      <p class="data-point-copy">
                        annual direct contacts made through community outreach and education
                      </p>
                      <p class="cta-link">
                        <a class="ghost" href="/about/reach/state.html">See our state impact in action</a>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="tab-pane fade" id="nation-content" role="tabpanel" aria-labelledby="nation-tab">
                  <p class="text-white snw-copy">
                    We’re the home for leaders who are developing solutions to the seemingly impossible problems facing health care in the United States. Our community of scholars are paving the way for smarter investments
                    with greater returns and helping all Americans live better lives.
                  </p>
                  <img class="map-bg mx-auto d-block" src="images/graphics/usa-shape-wt-min.svg" alt="Shape of the continental United States">
                  <div class="data-point d-flex justify-content-center mt-5">
                    <p class="large-number">
                      3,200
                    </p>
                    <p class="data-point-copy">
                      current health professions students ready to affect positive change across the United States
                    </p>
                  </div>
                  <p class="cta-link">
                    <a class="ghost" href="about/reach/nation.html">See our national impact in action</a>
                  </p>
                </div>
                <div class="tab-pane fade" id="world-content" role="tabpanel" aria-labelledby="world-tab">
                  <p class="snw-copy">
                    Our students, educators and innovators work across international boundaries to improve the health of populations. Multiple partnerships and agreements with universities throughout the world lay the
                    groundwork for joint teaching, research and outreach programs. Students are also offered unique experiences to expand academic horizons through global mission trips.
                  </p>
                  <img class="mb-5 map-bg mx-auto d-block" src="images/graphics/world-shape-wt-min.svg" alt="Shape of a map of the world">
                  <div class="data-point d-flex justify-content-center">
                    <p class="large-number">
                      475
                    </p>
                    <p class="data-point-copy">
                      patient encounters during a one-time, five-day interdisciplinary mission trip to Bolivia
                    </p>
                  </div>
                  <p class="cta-link">
                    <a class="ghost" href="about/reach/world.html">See our global impact in action</a>
                  </p>
                </div>
              </div> 
            </div>
          </div>
        </div>
      </div>
      <!-- end tabs for large screens -->
    </div>
  </section>