Getting Started

A living style guide is a great tool to promote visual consistency, and speed up development times.

Colors

Crimson
#B30838
Pacific
#2C49A4
Sea Foam
#A8DADC
Imperial Red
#E63946
Fog
#F7F7F7
Prussian
#1D3557
Sea
#5D97C9
Orange
#FFAC5F
Sky Blue
#79B9ED
White
#ffffff
Black
#000000

Font Stacks

Primary Font:
Proxima Nova
Primary Font Bold:
Proxima Nova
Secondary Font:
Chronicle Display
Secondary Font Bold:
Chronicle Display

base

buttons

Example





Back to Top
<button type="button" class="btn btn--primary">For Institutions</button><br><br>
<button type="button" class="btn btn--secondary">For Institutions</button><br><br>

headings

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Headings - With Underline:

Heading 1


Headings - Callout Block:

Heading 2


Headings - Basic block in two columns:

Heading 2


Headings - Card title Slider:

Heading 2


Headings - Three Columns Cards:

Heading 2

Back to Top
<div>
    <h1 class="color-crimson">Heading 1</h1>
    <h2 class="color-pacific">Heading 2</h2>
    <h3 class="color-pacific">Heading 3</h3>
    <h4 class="color-pacific">Heading 4</h4>
    <h5 class="color-crimson">Heading 5</h5>
    <h6 class="color-pacific">Heading 6</h6>
</div>
<hr>
<!-- Headings -->
<h3 style="color:black; margin: 40px 0px;" class="sg-h2">Headings - With Underline:</h3>
<div style="background-image:url('https://picsum.photos/200/300/?blur'); background-repeat: no-repeat; background-size: 100%; padding: 10px 0px;">
    <h1 class="color-white underline">Heading 1</h1>
</div>
<hr>
<!-- Headings -->
<h3 style="color:black; margin: 40px 0px;" class="sg-h2">Headings - Callout Block:</h3>
<div>
    <h2 class="color-pacific big-size">Heading 2</h2>
</div>
<hr>
<!-- Headings -->
<h3 style="color:black; margin: 40px 0px;" class="sg-h2">Headings - Basic block in two columns:</h3>
<div>
    <h2 class="color-pacific">Heading 2</h2>
</div>
<hr>
<!-- Headings -->
<h3 style="color:black; margin: 40px 0px;" class="sg-h2">Headings - Card title Slider:</h3>
<div class="bg-pacific">
    <h2 class="color-white">Heading 2</h2>
</div>
<hr>
<u><h3 style="color:black; margin: 40px 0px;" class="sg-h2">Headings - Three Columns Cards:</h3></u>
<div class="bg-sea-foam">
    <h2 class="color-prussian">Heading 2</h2>
</div>

logo

Example

Back to Top
<section class="head">
    <div class="main-logo">
        <img alt="logo" src="images/icons/header_logo.svg">
    </div>
</section>

components

article image header

Example

Back to Top
<section class="article-image-header container">
    <div class="article-image-header--wrap">
        <div class="article-image-header--media">
            <img src="images/hero-image.png">
        </div>
    </div>
</section>

Example

Back to Top
<section class="carousel">
    <header class="container">
        <h2 class="color-pacific">
            Our Community
        </h2>
    </header>

    <div class="slider carousel-slider">

        <div class="carousel-slider--item">
            <div class="carousel-slider--media">
                <img src="images/image33.png">
            </div>
            <div class="carousel-slider--text">
                <span class="carousel-slider--text-title">
                    Spotlight
                </span>
                <p>
                    This is a featured spotlight title that may span two to three lines
                </p>
            </div>
        </div>
        <div class="carousel-slider--item">
            <div class="carousel-slider--media">
                <img src="images/image35.png">
            </div>
            <div class="carousel-slider--text">
                <span class="carousel-slider--text-title">
                    Spotlight
                </span>
                <p>
                    This is a featured spotlight title that may span two to three lines
                </p>
            </div>
        </div>
        <div class="carousel-slider--item">
            <div class="carousel-slider--media">
                <img src="images/image36.png">
            </div>
            <div class="carousel-slider--text">
                <span class="carousel-slider--text-title">
                    Spotlight
                </span>
                <p>
                    This is a featured spotlight title that may span two to three lines
                </p>
            </div>
        </div>
        <div class="carousel-slider--item">
            <div class="carousel-slider--media">
                <img src="images/image33.png">
            </div>
            <div class="carousel-slider--text">
                <span class="carousel-slider--text-title">
                    Spotlight
                </span>
                <p>
                    This is a featured spotlight title that may span two to three lines
                </p>
            </div>
        </div>
        <div class="carousel-slider--item">
            <div class="carousel-slider--media">
                <img src="images/image36.png">
            </div>
            <div class="carousel-slider--text">
                <span class="carousel-slider--text-title">
                    Spotlight
                </span>
                <p>
                    This is a featured spotlight title that may span two to three lines
                </p>
            </div>
        </div>

    </div>

</section>

experience relay

Example

Experience Relay

400k

Students educated by Relay Teachers

5000+

Teachers

1200+

School Leaders
see our impact

Experience Relay

Practical Curriculum — Relay’s curriculum combines theory and practical application, so you learn research-based teaching strategies that have the greatest impact on student learning.

Back to Top
<section class="card-experience-relay card-heading card-text--left mp-5">
    <div class="card-experience-relay--header xs container">
        <h3 class="color-pacific">
            Experience Relay
        </h3>
    </div>

    <div class="card-experience-relay--wrap">

        <div class="card-experience-relay--card">
            <div class="card-experience-relay--card-image">
                <img class="media" src="images/hero_video.png" alt="">
            </div>
            <div class="card-experience-relay--card-text bg-teal color-white">
                <div class="card-experience-relay--stat">
                    <h3>
                        400k
                    </h3>
                    <span>Students educated by Relay Teachers</span>
                </div>
                <div class="card-experience-relay--stat">
                    <h3>
                        5000+
                    </h3>
                    <span>Teachers</span>
                </div>
                <div class="card-experience-relay--stat">
                    <h3>
                        1200+
                    </h3>
                    <span>School Leaders</span>
                </div>
                <a href="" class=" link-white link-right-arrow">see our impact</a>
            </div>
        </div>


        <div class="card-experience-relay--text">
            <article>
                <header class="sm">
                    <h2 class="color-pacific">Experience Relay</h2>
                </header>
                <div class="card-experience-relay--text-image">
                    <img src="images/image8.png">
                </div>
                <div class="card-experience-relay--text-text container py-4">
                    <p>
                        <strong>Practical Curriculum</strong> — Relay’s curriculum combines theory and practical application, so you learn
                        research-based teaching strategies that have the greatest impact on student learning.
                    </p>
                </div>
            </article>
        </div>

    </div>

</section>

explore programs

Example

Explore Programs

Relay’s programs prepare current and future teachers and education leaders to reach diverse groups of students and transform student lives. Whether you are looking to partner with us to certify and educate your teachers or further education for yourself, Relay has a program for you.

Back to Top
<section class="explore-programs container py-5">

    <div class="explore-programs--icons">
        <article>
            <header>
                <h2 class="color-pacific">Explore Programs</h2>
            </header>
        </article>

        <div class="explore-programs--icons-icons">
            <div class="explore-programs-icon">
                <div class="explore-programs-icon-image">
                    <img src="images/individuals.svg">
                </div>
                <button type="button" class="btn btn--primary">For Individuals</button>
            </div>
            <div class="explore-programs-icon">
                <div class="explore-programs-icon-image">
                    <img src="images/institutions.svg">
                </div>
                <button type="button" class="btn btn--primary">For Institutions</button>
            </div>
        </div>
    </div>

    <div class="explore-programs--text">
        <div class="explore-programs--text-text">
            <p>
                Relay’s programs prepare current and future teachers and education leaders to reach diverse groups of
                students and transform student lives. Whether you are looking to partner with us to certify and educate
                your teachers or further education for yourself, Relay has a program for you.
            </p>
        </div>
    </div>

</section>

find a location

Example

Relay Atlanta

Find a location

With campuses across the country and online classes available anywhere, Relay impacts students across America. Select the state you would like to teach in to learn about the options in your area.

Back to Top
<section class="find-location container my-5">

    <div class="find-location--image">
        <div class="find-location--image-img">
            <img src="images/image19.png">
            <div class="find-location--image-heading container">
                <h6 class="underline color-white">Relay Atlanta</h6>
            </div>
        </div>

    </div>

    <div class="find-location--location container">
        <div class="find-location--location-wrap bg-pacific py-5">
            <h3 class="color-white">Find a location</h3>
            <p>
                With campuses across the country and online classes available anywhere, Relay impacts students across
                America.
                Select the state you would like to teach in to learn about the options in your area.
            </p>
            <div class="find-location--dropdown-container bg-white find-location--dropdown-container bg-white mt-5">
                <select name="states" id="find-location" class="color-pacific">
                    <option value="">- Select a State -</option>
                    <option value="Texas">Texas</option>
                    <option value="Oklahoma">Oklahoma</option>
                    <option value="Michigan">Michigan</option>
                    <option value="Wisconsin">Wisconsin</option>
                    <option value="Nevada">Nevada</option>
                </select>
                <button type="button" class="btn btn--primary">Continue</button>
            </div>
        </div>
    </div>
</section>

Example

Back to Top
<section class="footer">
  <div id="footer--our-programs" class="bg-prussian color-white p-mobile-40">
    <h3 class="color-sea-foam">Our Programs</h3>
    <ul class="footer--program-listing">
      <li class="footer--list-head">For Individuals</li>
      <ul class="footer--link-list">
        <li class="footer--list-subitem">Masters of Arts in Teaching</li>
        <li class="footer--list-subitem">Alternate Certification</li>
        <li class="footer--list-subitem">Certifications</li>
        <li class="footer--list-subitem">Professional Education</li>
        <li class="footer--list-subitem">Leadership Programs</li>
      </ul>
    </ul>
    <ul class="footer--program-listing">
      <li class="footer--list-head">For Organizations</li>
      <ul class="footer--link-list">
        <li class="footer--list-subitem">Teacher Pipeline</li>
        <li class="footer--list-subitem">Continuing Education</li>
      </ul>
    </ul>
  </div>
  <div id="footer--program-locations" class="bg-black p-mobile-40">
    <h3 class="color-sea-foam">Locations</h3>
    <p class="footer--location-text color-fog">
      Select the location you would like to teach in to learn about the options
      in your area.
    </p>
    <div class="footer--location-search">
      <div class="select-state select-state--dropdown-container bg-white">
        <select name="states" id="state-select" class="color-pacific">
          <option value="">- Select a Location -</option>
          <option value="Texas">Texas</option>
          <option value="Oklahoma">Oklahoma</option>
          <option value="Michigan">Michigan</option>
          <option value="Wisconsin">Wisconsin</option>
          <option value="Nevada">Nevada</option>
        </select>
        <button type="button" class="btn btn--primary">Continue</button>
      </div>
    </div>
    <div id="footer--social">
      <ul>
        <li><a href=""><img src="images/icons/Youtube.png" alt="youtube icon" /></a></li>
        <li><a href=""><img src="images/icons/Facebook.png"" alt="facebook icon"></a></li>
        <li><a href=""><img src="images/icons/linkedin-icon.png"" alt="linkedin icon"></a></li>
        <li><a href=""><img src="images/icons/Twitter.png"" alt="twitter icon"></a></li>
        <li><a href=""><img src="images/icons/Instagram.png"" alt="instagram icon"></a></li>
      </ul>
    </div>
  </div>
  <div id="footer--copyright" class="bg-white p-mobile-12">
    <p class="footer--copyright-text color-prussian">
      Copyright @2020 Relay Graduate School of Education
    </p>
    <ul>
      <li class="footer--copyright-li">Privacy Policy</li>
      <li class="footer--copyright-li">Cookie Policy</li>
    </ul>
  </div>
</section>

form

Example

Back to Top
<section class="container">
<section class="bg-prussian form-prussian">
    <div class="inline-fields">
        <div class="form-item">
            <label for="fname">First Name<span class="mandatory">*</span></label>
            <input type="text" id="fname" name="fname">
        </div>
        <div class="form-item">
            <label for="lname">Last Name<span class="mandatory">*</span></label>
            <input type="text" id="lname" name="lname">
        </div>
    </div>

    <div class="form-item">
        <label for="w3review">Message<span class="mandatory">*</span></label>
        <textarea id="w3review" name="w3review" rows="10">

        </textarea>
    </div>

    <div class="components">
        <div class="form-item">
            <select name="state" id="state">
                <option value="">- Select a Location -</option>
                <option value="new-york">New York</option>
                <option value="chicago">Chicago</option>
                <option value="oregon">Oregon</option>
                <option value="florida">Florida</option>
            </select>
        </div>

        <div class="form-item">
            <div class="swith-wrap">
                <label class="switch">
                    <input type="checkbox">
                    <span class="slider round"></span>
                </label>
                <label>Switch Label Off</label>
            </div>
        </div>

        <div class="form-item">
            <div class="swith-wrap">
                <label class="switch">
                    <input type="checkbox" checked>
                    <span class="slider round"></span>
                </label>
                <label>Switch Label On</label>
            </div>
        </div>
        <div class="form-item">
            <input class="btn btn--form" type="submit" value="Submit Form">
        </div>
    </div>

</section>
</section>

Example

Back to Top
<section class="header-quick-links">
    <div class="header-media-wrap">
        <div class="header-media">
            <img src="images/image14.png">
        </div>

        <div class="container header-media-head">
            <div class="header-media-head--heading">
                <h1 class="underline color-white">Relay Atlanta</h1>
            </div>

        </div>
    </div>

    <div class="header-quick-content container">
        <div class="header-quick-content--text py-5">
            <p>
                This “City in a Forest” is the birthplace of the Civil Rights Movement, the economic heart of the South,
                and a thriving and diverse community.
            </p>
            <p>
                Here in Atlanta, Relay has built a community of practitioners focused on K-12 student achievement and
                teacher well-being. Here in Atlanta, Relay has built a community of practitioners focused on K-12 student
                achievement and teacher well-being.
            </p>
        </div>
        <div class="header-quick-content--wrap ">
            <div class="header-quick-content--links py-5 px-5 bg-sea-foam">
                <h4 class="color-prussian">Quick Links</h4>
                <ul>
                    <li><a href="#">Programs</a></li>
                    <li><a href="#">Experience</a></li>
                    <li><a href="#">Atlanta Partners</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>

</section>

home header

Example

Transforming Education

One teacher at a time
One teacher at a time
One teacher at a time
One teacher at a time
Back to Top
<section class="container-no-sm home-header py-5">
    <article>
        <header class="container-sm">
            <h1 class="color-pacific">Transforming Education</h1>
        </header>
        <div class="home-header--wrap">
            <div class="slider text-slider container-sm">
                <div class="text-slider-item">
                    <div class="home-header--slide-text">
                        <span>One</span>
                        <span class="underline-text">teacher</span>
                        <span>at a time</span>
                    </div>
                </div>
                <div class="text-slider-item">
                    <div class="home-header--slide-text">
                        <span>One</span>
                        <span class="underline-text">teacher</span>
                        <span>at a time</span>
                    </div>
                </div>
                <div class="text-slider-item">
                    <div class="home-header--slide-text">
                        <span>One</span>
                        <span class="underline-text">teacher</span>
                        <span>at a time</span>
                    </div>
                </div>
                <div class="text-slider-item">
                    <div class="home-header--slide-text">
                        <span>One</span>
                        <span class="underline-text">teacher</span>
                        <span>at a time</span>
                    </div>
                </div>
            </div>
            <div class="home-header--media">
                <iframe width="100%" src="https://www.youtube.com/embed/pgk-719mTxM?enablejsapi=1&controls=0&fs=0&iv_load_policy=3&rel=0&showinfo=0">
                </iframe>
            </div>
        </div>
    </article>

</section>

large profile

Example

Section title goes here

Meet the team behind Relay's Professional Education Programs.
Zach Blattner
Role/subtitle
Zach Blattner
Role/subtitle
Zach Blattner
Role/subtitle
Zach Blattner
Role/subtitle
Zach Blattner
Role/subtitle
Zach Blattner
Role/subtitle
Back to Top
<section class="large-profiles container py-5 my-5">

    <div class="large-profiles--wrap">
        <header>
            <h2 class="color-pacific">Section title goes here</h2>
        </header>

        <div class="large-profiles--text">
            Meet the team behind Relay's Professional Education Programs.
        </div>

        <div class="large-profiles--profiles pt-5">

            <div class="large-profiles--profile profile-1">
                <a href="#profile-1" rel="modal:open">
                    <div class="large-profiles--profile-box">
                        <div class="large-profiles--profile-media">
                            <img src="images/image85.png">
                        </div>
                        <div class="large-profiles--profile-text">
                            <h5>Zach Blattner</h5>
                            <span class="subtitle">
                                Role/subtitle
                            </span>
                        </div>
                    </div>
                </a>
                <div id="profile-1" class="modal relay-modal large-profiles--modal">
                    <div class="large-profiles--profile-wrap">
                        <header>
                            <h3>Zach Blattner</h3>
                            <span class="subtitle">
                                Subtitle / Role
                            </span>
                        </header>
                        <div class="large-profiles--profile-bio">
                            <div class="large-profiles--bio-media-wrap">
                                <div class="large-profiles--bio-media">
                                    <img src="images/image85.png">
                                </div>
                            </div>
                            <div class="large-profiles--bio-text">
                                <p>
                                    Before launching Relay’s Professional Education team, Zach helped found Relay
                                    Online in 2017, where he provided instruction and advising to hundreds of English
                                    teachers across the country. In that role, he worked to apply the strong adult
                                    facilitation skills he developed as an instructor and school leader in combination
                                    with digital technologies and tools to ensure rigorous interactive online learning.
                                    Zach has also recently served as a consultant to organizations striving to strengthen
                                    the quality and impact of their synchronous online offerings, including Next Gen
                                    Personal Finance (his podcast with the Next Gen co-founder on online learning
                                    techniques is here), Philly Academy of School Leaders, and The Together Group.
                                    Prior to joining Relay Online, Zach served as the first Assistant Professor of Practice
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="large-profiles--profile profile-2">
                <a href="#profile-2" rel="modal:open">
                    <div class="large-profiles--profile-box">
                        <div class="large-profiles--profile-media">
                            <img src="images/image85.png">
                        </div>
                        <div class="large-profiles--profile-text">
                            <h5>Zach Blattner</h5>
                            <span class="subtitle">
                                Role/subtitle
                            </span>
                        </div>
                    </div>
                </a>
                <div id="profile-2" class="modal relay-modal large-profiles--modal">
                    <div class="large-profiles--profile-wrap">
                        <header>
                            <h3>Zach Blattner</h3>
                            <span class="subtitle">
                                Subtitle / Role
                            </span>
                        </header>
                        <div class="large-profiles--profile-bio">
                            <div class="large-profiles--bio-media-wrap">
                                <div class="large-profiles--bio-media">
                                    <img src="images/image85.png">
                                </div>
                            </div>
                            <div class="large-profiles--bio-text">
                                <p>
                                    Before launching Relay’s Professional Education team, Zach helped found Relay
                                    Online in 2017, where he provided instruction and advising to hundreds of English
                                    teachers across the country. In that role, he worked to apply the strong adult
                                    facilitation skills he developed as an instructor and school leader in combination
                                    with digital technologies and tools to ensure rigorous interactive online learning.
                                    Zach has also recently served as a consultant to organizations striving to strengthen
                                    the quality and impact of their synchronous online offerings, including Next Gen
                                    Personal Finance (his podcast with the Next Gen co-founder on online learning
                                    techniques is here), Philly Academy of School Leaders, and The Together Group.
                                    Prior to joining Relay Online, Zach served as the first Assistant Professor of Practice
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="large-profiles--profile profile-3">
                <a href="#profile-3" rel="modal:open">
                    <div class="large-profiles--profile-box">
                        <div class="large-profiles--profile-media">
                            <img src="images/image85.png">
                        </div>
                        <div class="large-profiles--profile-text">
                            <h5>Zach Blattner</h5>
                            <span class="subtitle">
                                Role/subtitle
                            </span>
                        </div>
                    </div>
                </a>
                <div id="profile-3" class="modal relay-modal large-profiles--modal">
                    <div class="large-profiles--profile-wrap">
                        <header>
                            <h3>Zach Blattner</h3>
                            <span class="subtitle">
                                Subtitle / Role
                            </span>
                        </header>
                        <div class="large-profiles--profile-bio">
                            <div class="large-profiles--bio-media-wrap">
                                <div class="large-profiles--bio-media">
                                    <img src="images/image85.png">
                                </div>
                            </div>
                            <div class="large-profiles--bio-text">
                                <p>
                                    Before launching Relay’s Professional Education team, Zach helped found Relay
                                    Online in 2017, where he provided instruction and advising to hundreds of English
                                    teachers across the country. In that role, he worked to apply the strong adult
                                    facilitation skills he developed as an instructor and school leader in combination
                                    with digital technologies and tools to ensure rigorous interactive online learning.
                                    Zach has also recently served as a consultant to organizations striving to strengthen
                                    the quality and impact of their synchronous online offerings, including Next Gen
                                    Personal Finance (his podcast with the Next Gen co-founder on online learning
                                    techniques is here), Philly Academy of School Leaders, and The Together Group.
                                    Prior to joining Relay Online, Zach served as the first Assistant Professor of Practice
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="large-profiles--profiles small pt-5">

            <div class="large-profiles--profile profile-4">
                <a href="#profile-4" rel="modal:open">
                    <div class="large-profiles--profile-box">
                        <div class="large-profiles--profile-media">
                            <img src="images/image85.png">
                        </div>
                        <div class="large-profiles--profile-text">
                            <h5>Zach Blattner</h5>
                            <span class="subtitle">
                                Role/subtitle
                            </span>
                        </div>
                    </div>
                </a>
                <div id="profile-4" class="modal relay-modal large-profiles--modal">
                    <div class="large-profiles--profile-wrap">
                        <header>
                            <h3>Zach Blattner</h3>
                            <span class="subtitle">
                                Subtitle / Role
                            </span>
                        </header>
                        <div class="large-profiles--profile-bio">
                            <div class="large-profiles--bio-media-wrap">
                                <div class="large-profiles--bio-media">
                                    <img src="images/image85.png">
                                </div>
                            </div>
                            <div class="large-profiles--bio-text">
                                <p>
                                    Before launching Relay’s Professional Education team, Zach helped found Relay
                                    Online in 2017, where he provided instruction and advising to hundreds of English
                                    teachers across the country. In that role, he worked to apply the strong adult
                                    facilitation skills he developed as an instructor and school leader in combination
                                    with digital technologies and tools to ensure rigorous interactive online learning.
                                    Zach has also recently served as a consultant to organizations striving to strengthen
                                    the quality and impact of their synchronous online offerings, including Next Gen
                                    Personal Finance (his podcast with the Next Gen co-founder on online learning
                                    techniques is here), Philly Academy of School Leaders, and The Together Group.
                                    Prior to joining Relay Online, Zach served as the first Assistant Professor of Practice
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="large-profiles--profile profile-5">
                <a href="#profile-5" rel="modal:open">
                    <div class="large-profiles--profile-box">
                        <div class="large-profiles--profile-media">
                            <img src="images/image85.png">
                        </div>
                        <div class="large-profiles--profile-text">
                            <h5>Zach Blattner</h5>
                            <span class="subtitle">
                                Role/subtitle
                            </span>
                        </div>
                    </div>
                </a>
                <div id="profile-5" class="modal relay-modal large-profiles--modal">
                    <div class="large-profiles--profile-wrap">
                        <header>
                            <h3>Zach Blattner</h3>
                            <span class="subtitle">
                                Subtitle / Role
                            </span>
                        </header>
                        <div class="large-profiles--profile-bio">
                            <div class="large-profiles--bio-media-wrap">
                                <div class="large-profiles--bio-media">
                                    <img src="images/image85.png">
                                </div>
                            </div>
                            <div class="large-profiles--bio-text">
                                <p>
                                    Before launching Relay’s Professional Education team, Zach helped found Relay
                                    Online in 2017, where he provided instruction and advising to hundreds of English
                                    teachers across the country. In that role, he worked to apply the strong adult
                                    facilitation skills he developed as an instructor and school leader in combination
                                    with digital technologies and tools to ensure rigorous interactive online learning.
                                    Zach has also recently served as a consultant to organizations striving to strengthen
                                    the quality and impact of their synchronous online offerings, including Next Gen
                                    Personal Finance (his podcast with the Next Gen co-founder on online learning
                                    techniques is here), Philly Academy of School Leaders, and The Together Group.
                                    Prior to joining Relay Online, Zach served as the first Assistant Professor of Practice
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="large-profiles--profile profile-6">
                <a href="#profile-6" rel="modal:open">
                    <div class="large-profiles--profile-box">
                        <div class="large-profiles--profile-media">
                            <img src="images/image85.png">
                        </div>
                        <div class="large-profiles--profile-text">
                            <h5>Zach Blattner</h5>
                            <span class="subtitle">
                                Role/subtitle
                            </span>
                        </div>
                    </div>
                </a>
                <div id="profile-6" class="modal relay-modal large-profiles--modal">
                    <div class="large-profiles--profile-wrap">
                        <header>
                            <h3>Zach Blattner</h3>
                            <span class="subtitle">
                                Subtitle / Role
                            </span>
                        </header>
                        <div class="large-profiles--profile-bio">
                            <div class="large-profiles--bio-media-wrap">
                                <div class="large-profiles--bio-media">
                                    <img src="images/image85.png">
                                </div>
                            </div>
                            <div class="large-profiles--bio-text">
                                <p>
                                    Before launching Relay’s Professional Education team, Zach helped found Relay
                                    Online in 2017, where he provided instruction and advising to hundreds of English
                                    teachers across the country. In that role, he worked to apply the strong adult
                                    facilitation skills he developed as an instructor and school leader in combination
                                    with digital technologies and tools to ensure rigorous interactive online learning.
                                    Zach has also recently served as a consultant to organizations striving to strengthen
                                    the quality and impact of their synchronous online offerings, including Next Gen
                                    Personal Finance (his podcast with the Next Gen co-founder on online learning
                                    techniques is here), Philly Academy of School Leaders, and The Together Group.
                                    Prior to joining Relay Online, Zach served as the first Assistant Professor of Practice
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

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


</section>

new stories

Example

News & Stories

Back to Top
<section class="new-stories py-5">
    <header class="container-sm new-stories--heading">
        <h2 class="color-pacific">News & Stories</h2>
    </header>
    <div class="new-stories--wrap">

        <div class="col-1 new-stories--wrap-col">
            <div class="new-stories--media">
                <img src="images/image37.png">
            </div>
            <div class="new-stories--text container-sm">
                <span class="new-stories--subtitle">
                    Diversity
                </span>
                <h6>You can’t wait: Building a Shared Vision for Racial Equity</h6>
                <p>
                    Laura Garza says a crystalizing moment last spring came during a virtual end-of-the-year awards ceremony.
                </p>
                <a href="#" class="link">Read More</a>
            </div>
        </div>
        <div class="col-2 new-stories--wrap-col">
            <div class="bg-sea-foam container-sm new-stories--articles">
                <header>
                    <h6 class="underline">Recent Articles</h6>
                </header>
                <div class="new-stories--article">
                    <a href="#">
                        <div class="new-stories--article-media">
                            <img src="images/image41.png">
                        </div>
                        <div class="new-stories--article-text">
                            <span class="new-stories--article-subtitle">News</span>
                            <p>
                                Relay's President, Dr. Mayme Hostetter selected as a 2020 Dial Fellow
                            </p>
                        </div>
                    </a>
                </div>
                <div class="new-stories--article">
                    <a href="#">
                        <div class="new-stories--article-media">
                            <img src="images/image38.png">
                        </div>
                        <div class="new-stories--article-text">
                            <span class="new-stories--article-subtitle">News</span>
                            <p>
                                Relay's President, Dr. Mayme Hostetter selected as a 2020 Dial Fellow
                            </p>
                        </div>
                    </a>
                </div>
                <div class="new-stories--article">
                    <a href="#">
                        <div class="new-stories--article-media">
                            <img src="images/image39.png">
                        </div>
                        <div class="new-stories--article-text">
                            <span class="new-stories--article-subtitle">News</span>
                            <p>
                                Relay's President, Dr. Mayme Hostetter selected as a 2020 Dial Fellow
                            </p>
                        </div>
                    </a>
                </div>
                <div class="new-stories--article">
                    <a href="#">
                        <div class="new-stories--article-media">
                            <img src="images/image40.png">
                        </div>
                        <div class="new-stories--article-text">
                            <span class="new-stories--article-subtitle">News</span>
                            <p>
                                Relay's President, Dr. Mayme Hostetter selected as a 2020 Dial Fellow
                            </p>
                        </div>
                    </a>
                </div>

            </div>
        </div>


    </div>


</section>

program accordion

Example

Our Programs

K-12 student achievement and teacher well-being. Here in Atlanta, Relay has built a community of practitioners focused on K-12 student achievement and teacher well-being.

Masters of Arts in Teaching
Teaching Residency
Teaching Residency
2 Years
32 Credits

Tuition & Fees

$35,000 total

+ Relay Institutional Aid: $16,000

+ Segal Americorps Education

Award*: $12,000

$8,000 max out of pocket tuition

Available Majors

Elementary Secondary ELA

Secondary Math

Secondary Sciences

Secondary Social Studies

Special Education (+6 credits)

Masters of Arts in Teaching
Special Education Dual Certification
Special Education Dual Certification
2 Years
32 Credits

Tuition & Fees

$35,000 total

+ Relay Institutional Aid: $16,000

+ Segal Americorps Education

Award*: $12,000

$8,000 max out of pocket tuition

Available Majors

Elementary Secondary ELA

Secondary Math

Secondary Sciences

Secondary Social Studies

Special Education (+6 credits)

Special Education Certification
Advanced Level
Advanced Level
2 Years
32 Credits

Tuition & Fees

$35,000 total

+ Relay Institutional Aid: $16,000

+ Segal Americorps Education

Award*: $12,000

$8,000 max out of pocket tuition

Available Majors

Elementary Secondary ELA

Secondary Math

Secondary Sciences

Secondary Social Studies

Special Education (+6 credits)

Alternate Route Certification
Non-Degree Program
Non-Degree Program
2 Years
32 Credits

Tuition & Fees

$35,000 total

+ Relay Institutional Aid: $16,000

+ Segal Americorps Education

Award*: $12,000

$8,000 max out of pocket tuition

Available Majors

Elementary Secondary ELA

Secondary Math

Secondary Sciences

Secondary Social Studies

Special Education (+6 credits)

Back to Top
<section class="program-accordion--wrap my-5 pb-5 container">

    <div class="program-accordion--text py-5">
        <article>
            <header>
                <h2 class="color-pacific">Our Programs</h2>
            </header>
        </article>
        <div class="program-accordion--text-text">
            <p>
                K-12 student achievement and teacher well-being. Here in Atlanta, Relay has built a community
                of practitioners focused on K-12 student achievement and teacher well-being.
            </p>
        </div>
    </div>

    <div class="program-accordion--accordion">
        <div class="program-accordion-item bg-prussian">
            <div class="program-accordion-heading">
                <h5 class="underline">Masters of Arts in Teaching</h5>
                <h6>Teaching Residency</h6>
            </div>
            <div class="program-accordion-body">
                <div class="program-accordion-body--top">
                    <div class="program-accordion-tab">
                        <span>Teaching Residency</span>
                    </div>
                    <div class="program-accordion-tab">
                        <span>2 Years</span>
                    </div>
                    <div class="program-accordion-tab">
                        <span>32 Credits</span>
                    </div>
                </div>
                <div class="program-accordion-body--body">
                    <div class="program-accordion-icon py-4">
                        <img src="images/icons/icon-graduate.svg">
                    </div>
                    <div class="program-accordion-text">
                        <h4>Tuition & Fees</h4>
                        <p>
                            <span class="accordion-bigger">$35,000</span> total
                        </p>
                        <p>+ Relay Institutional Aid: $16,000</p>
                        <p>+ Segal Americorps Education</p>
                        <p>Award*: $12,000</p>
                        <p>
                            <span class="accordion-bigger color-orange">$8,000</span> max out of pocket tuition
                        </p>
                    </div>
                </div>
                <div class="program-accordion-body--body">
                    <div class="program-accordion-icon py-4">
                        <img src="images/icons/icon-graduate.svg">
                    </div>
                    <div class="program-accordion-text">
                        <h4>Available Majors</h4>
                        <p>Elementary Secondary ELA</p>
                        <p>Secondary Math</p>
                        <p>Secondary Sciences</p>
                        <p>Secondary Social Studies</p>
                        <p>Special Education (+6 credits)</p>
                    </div>

                </div>
                <div class="program-accordion-ctas">
                    <a href="" class="btn btn--sea">Learn More</a>
                    <a href="" class="btn btn--sea">Apply Now</a>
                </div>

            </div>
        </div>

        <div class="program-accordion-item bg-prussian">
            <div class="program-accordion-heading">
                <h5 class="underline">Masters of Arts in Teaching</h5>
                <h6>Special Education Dual Certification
                </h6>
            </div>
            <div class="program-accordion-body">
                <div class="program-accordion-body--top">
                    <div class="program-accordion-tab">
                        <span>Special Education Dual Certification</span>
                    </div>
                    <div class="program-accordion-tab">
                        <span>2 Years</span>
                    </div>
                    <div class="program-accordion-tab">
                        <span>32 Credits</span>
                    </div>
                </div>
                <div class="program-accordion-body--body">
                    <div class="program-accordion-icon py-4">
                        <img src="images/icons/icon-graduate.svg">
                    </div>
                    <div class="program-accordion-text">
                        <h4>Tuition & Fees</h4>
                        <p>
                            <span class="accordion-bigger">$35,000</span> total
                        </p>
                        <p>+ Relay Institutional Aid: $16,000</p>
                        <p>+ Segal Americorps Education</p>
                        <p>Award*: $12,000</p>
                        <p>
                            <span class="accordion-bigger color-orange">$8,000</span> max out of pocket tuition
                        </p>
                    </div>
                </div>


                <div class="program-accordion-body--body">
                    <div class="program-accordion-icon py-4">
                        <img src="images/icons/icon-graduate.svg">
                    </div>
                    <div class="program-accordion-text">
                        <h4>Available Majors</h4>
                        <p>Elementary Secondary ELA</p>
                        <p>Secondary Math</p>
                        <p>Secondary Sciences</p>
                        <p>Secondary Social Studies</p>
                        <p>Special Education (+6 credits)</p>
                    </div>
                </div>
                <div class="program-accordion-ctas">
                    <a href="" class="btn btn--sea">Learn More</a>
                    <a href="" class="btn btn--sea">Apply Now</a>
                </div>

            </div>
        </div>

        <div class="program-accordion-item bg-prussian">
            <div class="program-accordion-heading">
                <h5 class="underline">Special Education Certification</h5>
                <h6>Advanced Level</h6>
            </div>
            <div class="program-accordion-body">
                <div class="program-accordion-body--top">
                    <div class="program-accordion-tab">
                        <span>Advanced Level</span>
                    </div>
                    <div class="program-accordion-tab">
                        <span>2 Years</span>
                    </div>
                    <div class="program-accordion-tab">
                        <span>32 Credits</span>
                    </div>
                </div>
                <div class="program-accordion-body--body">
                    <div class="program-accordion-icon py-4">
                        <img src="images/icons/icon-graduate.svg">
                    </div>
                    <div class="program-accordion-text">
                        <h4>Tuition & Fees</h4>
                        <p>
                            <span class="accordion-bigger">$35,000</span> total
                        </p>
                        <p>+ Relay Institutional Aid: $16,000</p>
                        <p>+ Segal Americorps Education</p>
                        <p>Award*: $12,000</p>
                        <p>
                            <span class="accordion-bigger color-orange">$8,000</span> max out of pocket tuition
                        </p>
                    </div>
                </div>


                <div class="program-accordion-body--body">
                    <div class="program-accordion-icon py-4">
                        <img src="images/icons/icon-graduate.svg">
                    </div>
                    <div class="program-accordion-text">
                        <h4>Available Majors</h4>
                        <p>Elementary Secondary ELA</p>
                        <p>Secondary Math</p>
                        <p>Secondary Sciences</p>
                        <p>Secondary Social Studies</p>
                        <p>Special Education (+6 credits)</p>
                    </div>
                </div>
                <div class="program-accordion-ctas">
                    <a href="" class="btn btn--sea">Learn More</a>
                    <a href="" class="btn btn--sea">Apply Now</a>
                </div>

            </div>
        </div>

        <div class="program-accordion-item bg-prussian">
            <div class="program-accordion-heading">
                <h5 class="underline">Alternate Route Certification</h5>
                <h6>Non-Degree Program</h6>
            </div>
            <div class="program-accordion-body">
                <div class="program-accordion-body--top">
                    <div class="program-accordion-tab">
                        <span>Non-Degree Program</span>
                    </div>
                    <div class="program-accordion-tab">
                        <span>2 Years</span>
                    </div>
                    <div class="program-accordion-tab">
                        <span>32 Credits</span>
                    </div>
                </div>
                <div class="program-accordion-body--body">
                    <div class="program-accordion-icon py-4">
                        <img src="images/icons/icon-graduate.svg">
                    </div>
                    <div class="program-accordion-text">
                        <h4>Tuition & Fees</h4>
                        <p>
                            <span class="accordion-bigger">$35,000</span> total
                        </p>
                        <p>+ Relay Institutional Aid: $16,000</p>
                        <p>+ Segal Americorps Education</p>
                        <p>Award*: $12,000</p>
                        <p>
                            <span class="accordion-bigger color-orange">$8,000</span> max out of pocket tuition
                        </p>
                    </div>
                </div>


                <div class="program-accordion-body--body">
                    <div class="program-accordion-icon py-4">
                        <img src="images/icons/icon-graduate.svg">
                    </div>
                    <div class="program-accordion-text">
                        <h4>Available Majors</h4>
                        <p>Elementary Secondary ELA</p>
                        <p>Secondary Math</p>
                        <p>Secondary Sciences</p>
                        <p>Secondary Social Studies</p>
                        <p>Special Education (+6 credits)</p>
                    </div>
                </div>

                <div class="program-accordion-ctas">
                    <a href="" class="btn btn--sea">Learn More</a>
                    <a href="" class="btn btn--sea">Apply Now</a>
                </div>

            </div>
        </div>


    </div>

</section>

program cta

Example

Ready to apply?

Complete the Interest Form to contact us and express your interest in one of our programs.

Still have questions?

Complete the Interest Form to contact us and express your interest in one of our programs.

Back to Top
<section class="program-cta py-5">
    <div class="program-cta--wrapper">

        <div class="program-cta--col col-1">
            <div class=" bg-sea-foam program-cta--col-wrap">
            <article class="container-sm py-4">
                <header>
                    <h2 class="color-prussian">Ready to apply?</h2>
                </header>
                <div class="program-cta--text mb-4">
                    <p>
                        Complete the Interest Form to contact us and express your interest in one of our programs.
                    </p>
                </div>
                <div class="program-cta--cta">
                    <a href="#" class="btn btn--primary">Start Application</a>
                </div>
            </article>
            </div>
        </div>

        <div class="program-cta--col col-2">
            <div class="bg-celadon program-cta--col-wrap">
            <article class="container-sm py-4">
                <header>
                    <h2 class="color-white">Still have questions?</h2>
                </header>
                <div class="program-cta--text mb-4">
                    <p>
                        Complete the Interest Form to contact us and express your interest in one of our programs.
                    </p>
                </div>
                <div class="program-cta--cta">
                    <a href="#" class="btn btn--white-celadon">Contact Us</a>
                </div>
            </article>
            </div>
        </div>



    </div>
</section>

program option

Example

Program Options

Teaching Residency

Those new to the teaching profession find Relay’s flagship MAT with a Teaching Residency program incredibly helpful. Not only will you learn from seasoned professionals as you complete your graduate degree coursework, but you will also earn a teaching certification and have an apprentice year where you will get hands-on classroom experience. This gradual on-ramp towards teaching and managing your classroom will give you the knowledge, skills, and confidence you need to excel as a teacher of record.

What you’ll get
  • Master of Arts in Teaching
  • Apprentice Year
  • Teaching Certification
Master’s Degree Only

If you’re already a teacher and are not seeking certification, this track will allow you to complete your MAT with a combination of in-person and online courses. This degree program will bolster your pedagogical knowledge and skills needed to advance your career and improve student outcomes.

What you’ll get
  • Master of Arts in Teaching
  • Teaching Certification
Teaching Residency

The accelerated track for a MAT gives current, experienced teachers a direct route to completing their graduate degrees. This intensive program provides the same quality graduate curriculum on a shortened timeline so you can complete your degree efficiently.

What you’ll get
  • Master of Arts in Teaching
Back to Top
<section class="program-option container py-5">

    <header class="container mb-5">
        <h2 class="color-pacific">Program Options</h2>
    </header>

    <div class="program-option--wrap">

        <div class="program-option--item-wrap py-4">

            <div class="program-option--col col-1">
                <div class="program-option--col-col bg-fog border-orange">
                    <article>
                        <header>
                            <h5 class="color-prussian">Teaching Residency</h5>
                        </header>
                        <div class="program-option--col-text ">
                            <p>
                                Those new to the teaching profession find Relay’s flagship MAT with a
                                Teaching Residency program incredibly helpful. Not only will you learn from seasoned
                                professionals as you complete your graduate degree coursework, but you will also earn
                                a teaching certification and have an apprentice year where you will get hands-on
                                classroom experience. This gradual on-ramp towards teaching and managing your classroom
                                will give you the knowledge, skills, and confidence you need to excel as a teacher
                                of record.
                            </p>
                        </div>
                    </article>
                </div>
            </div>

            <div class="program-option--col col-2">
                <div class="program-option--col-col bg-sea-foam">
                    <article>
                        <header>
                            <h6 class="color-prussian">What you’ll get</h6>
                        </header>
                        <div class="program-option--col-text color-prussian">
                            <ul>
                                <li>Master of Arts in Teaching</li>
                                <li>Apprentice Year</li>
                                <li>Teaching Certification</li>
                            </ul>
                        </div>
                    </article>
                </div>
            </div>
        </div>

        <div class="program-option--item-wrap py-4">

            <div class="program-option--col col-1">
                <div class="program-option--col-col bg-fog border-orange">
                    <article>
                        <header>
                            <h5 class="color-prussian">Master’s Degree Only</h5>
                        </header>
                        <div class="program-option--col-text ">
                            <p>
                                If you’re already a teacher and are not seeking certification, this track will allow
                                you to complete your MAT with a combination of in-person and online courses.
                                This degree program will bolster your pedagogical knowledge and skills needed
                                to advance your career and improve student outcomes.
                            </p>
                        </div>
                    </article>
                </div>
            </div>

            <div class="program-option--col col-2">
                <div class="program-option--col-col bg-sea-foam">
                    <article>
                        <header>
                            <h6 class="color-prussian">What you’ll get</h6>
                        </header>
                        <div class="program-option--col-text color-prussian">
                            <ul>
                                <li>Master of Arts in Teaching</li>
                                <li>Teaching Certification</li>
                            </ul>
                        </div>
                    </article>
                </div>
            </div>
        </div>

        <div class="program-option--item-wrap py-4">

            <div class="program-option--col col-1">
                <div class="program-option--col-col bg-fog border-orange">
                    <article>
                        <header>
                            <h5 class="color-prussian">Teaching Residency</h5>
                        </header>
                        <div class="program-option--col-text ">
                            <p>
                                The accelerated track for a MAT gives current, experienced teachers a direct route
                                to completing their graduate degrees. This intensive program provides the same quality
                                graduate curriculum on a shortened timeline so you can complete your degree efficiently.
                            </p>
                        </div>
                    </article>
                </div>
            </div>

            <div class="program-option--col col-2">
                <div class="program-option--col-col bg-sea-foam">
                    <article>
                        <header>
                            <h6 class="color-prussian">What you’ll get</h6>
                        </header>
                        <div class="program-option--col-text color-prussian">
                            <ul>
                                <li>Master of Arts in Teaching</li>
                            </ul>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>

</section>

scattered story

Example

Innovate and Inspire — Relay was founded by innovative educators driven to improve PK-12 education through a bold vision for pragmatic and meaningful teacher preparation.

Meaningful Feedback — Whether you are a part of our teaching residency or pursuing leadership credentials, your instructors are on-hand to provide personal feedback to improve your skills.

Practical Curriculum — Relay’s curriculum combines theory and practical application, so you learn research-based teaching strategies that have the greatest impact on student learning.

Learn from Top Educators — Relay’s instructors walk the walk. With years as educators and leaders, your professors are among the best in the field and will help prepare you for success.

Back to Top
<section class="py-5 scattered-story">

    <div class="scattered-story--wrap">

        <div class="col-1 scattered-story--col">

            <div class="scattered-story--card">
                <div class="scattered-story--media">
                    <img src="images/image30.png">
                </div>
                <div class="scattered-story--text">
                    <p>
                        <strong>Innovate and Inspire</strong> — Relay was founded by innovative educators driven to improve PK-12
                        education through a bold vision for pragmatic and meaningful teacher preparation.
                    </p>
                </div>
            </div>
            <div class="scattered-story--card">
                <div class="scattered-story--media">
                    <img src="images/image34.png">
                </div>
                <div class="scattered-story--text">
                    <p>
                        <strong>Meaningful Feedback</strong> — Whether you are a part of our teaching residency or
                        pursuing leadership credentials, your instructors are on-hand to provide personal feedback
                        to improve your skills.
                    </p>
                </div>
            </div>

        </div>
        <div class="col-2 scattered-story--col">
            <div class="scattered-story--card">
                <div class="scattered-story--media">
                    <img src="images/image31.png">
                </div>
                <div class="scattered-story--text">
                    <p>
                        <strong>Practical Curriculum</strong> — Relay’s curriculum combines theory and practical application,
                        so you learn research-based teaching strategies that have the greatest impact on student learning.
                    </p>
                </div>
            </div>

            <div class="scattered-story--card">
                <div class="scattered-story--media">
                    <img src="images/image32.png">
                </div>
                <div class="scattered-story--text">
                    <p>
                        <strong>Learn from Top Educators</strong> — Relay’s instructors walk the walk. With years as
                        educators and leaders, your professors are among the best in the field and will help prepare
                        you for success.
                    </p>
                </div>
            </div>

        </div>
    </div>


</section>

patterns

accordion

Example

Accordion Item

A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two in which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students. Having completed the program and practiced daily, you’ll graduate confident and ready to ensure that all students in your classroom are learning and growing, both academically and personally.

Accordion Item

A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two in which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students. Having completed the program and practiced daily, you’ll graduate confident and ready to ensure that all students in your classroom are learning and growing, both academically and personally.

Accordion Item

A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two in which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students. Having completed the program and practiced daily, you’ll graduate confident and ready to ensure that all students in your classroom are learning and growing, both academically and personally.

Accordion Item (Closed)

A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two in which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students. Having completed the program and practiced daily, you’ll graduate confident and ready to ensure that all students in your classroom are learning and growing, both academically and personally.

Back to Top
<section class="accordion container mb-5">
    <div class="accordion-item">
        <div class="accordion-heading">
            <h6>Accordion Item</h6>
            <span class="pointer"></span>
        </div>
        <div class="accordion-body">
            <p>
                A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two
                in which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students.
                Having completed the program and practiced daily, you’ll graduate confident and ready to ensure
                that all students in your classroom are learning and growing, both academically and personally.
            </p>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-heading">
            <h6>Accordion Item</h6>
            <span class="pointer"></span>
        </div>
        <div class="accordion-body">
            <p>
                A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two
                in which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students.
                Having completed the program and practiced daily, you’ll graduate confident and ready to ensure
                that all students in your classroom are learning and growing, both academically and personally.
            </p>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-heading">
            <h6>Accordion Item</h6>
            <span class="pointer"></span>
        </div>
        <div class="accordion-body">
            <p>
                A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two
                in which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students.
                Having completed the program and practiced daily, you’ll graduate confident and ready to ensure
                that all students in your classroom are learning and growing, both academically and personally.
            </p>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-heading">
            <h6>Accordion Item (Closed)</h6>
            <span class="pointer"></span>
        </div>
        <div class="accordion-body">
            <p>
                A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two
                in which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students.
                Having completed the program and practiced daily, you’ll graduate confident and ready to ensure
                that all students in your classroom are learning and growing, both academically and personally.
            </p>
        </div>
    </div>
</section>

article stack

Example

Recent Articles

You can’t wait: Building a Shared Vision for Racial Equity
Diversity

Laura Garza says a crystalizing moment last spring came during a virtual end-of-the-year awards ceremony.

Read More
You can’t wait: Building a Shared Vision for Racial Equity
Diversity

Laura Garza says a crystalizing moment last spring came during a virtual end-of-the-year awards ceremony.

Read More
You can’t wait: Building a Shared Vision for Racial Equity
Diversity

Laura Garza says a crystalizing moment last spring came during a virtual end-of-the-year awards ceremony.

Read More
You can’t wait: Building a Shared Vision for Racial Equity
Diversity

Laura Garza says a crystalizing moment last spring came during a virtual end-of-the-year awards ceremony.

Read More
You can’t wait: Building a Shared Vision for Racial Equity
Diversity

Laura Garza says a crystalizing moment last spring came during a virtual end-of-the-year awards ceremony.

Read More
You can’t wait: Building a Shared Vision for Racial Equity
Diversity

Laura Garza says a crystalizing moment last spring came during a virtual end-of-the-year awards ceremony.

Read More
Back to Top
<section class="article-stack bg-fog py-5 my-5">
    <div class="article-stack-wrap container">
    <header>
        <h2 class="color-prussian">Recent Articles</h2>
    </header>
    <div class="article-stack--articles">
        <div class="article-stack--item item-1">
            
            <div class="article-stack--item-media">
                <div class="article-stack--item-img">
                    <img src="images/image47.png">
                </div>
                <div class="article-stack--item-title">
                    <h6 class="underline">You can’t wait: Building a Shared Vision for Racial Equity</h6>
                </div>
            </div>
            <div class="article-stack--item-text">
                <span class="sutitle">Diversity</span>
                <p>
                    Laura Garza says a crystalizing moment last spring came during a virtual end-of-the-year awards ceremony.
                </p>
                <a class="link">Read More</a>
            </div>
        </div>
        <div class="article-stack--item item-2">

            <div class="article-stack--item-media">
                <div class="article-stack--item-img">
                    <img src="images/image42.png">
                </div>
                <div class="article-stack--item-title">
                    <h6 class="underline">You can’t wait: Building a Shared Vision for Racial Equity</h6>
                </div>
            </div>
            <div class="article-stack--item-text">
                <span class="sutitle">Diversity</span>
                <p>
                    Laura Garza says a crystalizing moment last spring came during a virtual end-of-the-year awards ceremony.
                </p>
                <a class="link">Read More</a>
            </div>
        </div>
        <div class="article-stack--item item-3">

            <div class="article-stack--item-media">
                <div class="article-stack--item-img">
                    <img src="images/image43.png">
                </div>
                <div class="article-stack--item-title">
                    <h6 class="underline">You can’t wait: Building a Shared Vision for Racial Equity</h6>
                </div>
            </div>
            <div class="article-stack--item-text">
                <span class="sutitle">Diversity</span>
                <p>
                    Laura Garza says a crystalizing moment last spring came during a virtual end-of-the-year awards ceremony.
                </p>
                <a class="link">Read More</a>
            </div>
        </div>
        <div class="article-stack--item item-4">

            <div class="article-stack--item-media">
                <div class="article-stack--item-img">
                    <img src="images/image44.png">
                </div>
                <div class="article-stack--item-title">
                    <h6 class="underline">You can’t wait: Building a Shared Vision for Racial Equity</h6>
                </div>
            </div>
            <div class="article-stack--item-text">
                <span class="sutitle">Diversity</span>
                <p>
                    Laura Garza says a crystalizing moment last spring came during a virtual end-of-the-year awards ceremony.
                </p>
                <a class="link">Read More</a>
            </div>
        </div>
        <div class="article-stack--item item-5">

            <div class="article-stack--item-media">
                <div class="article-stack--item-img">
                    <img src="images/image45.png">
                </div>
                <div class="article-stack--item-title">
                    <h6 class="underline">You can’t wait: Building a Shared Vision for Racial Equity</h6>
                </div>
            </div>
            <div class="article-stack--item-text">
                <span class="sutitle">Diversity</span>
                <p>
                    Laura Garza says a crystalizing moment last spring came during a virtual end-of-the-year awards ceremony.
                </p>
                <a class="link">Read More</a>
            </div>
        </div>
        <div class="article-stack--item item-6">

            <div class="article-stack--item-media">
                <div class="article-stack--item-img">
                    <img src="images/image46.png">
                </div>
                <div class="article-stack--item-title">
                    <h6 class="underline">You can’t wait: Building a Shared Vision for Racial Equity</h6>
                </div>
            </div>
            <div class="article-stack--item-text">
                <span class="sutitle">Diversity</span>
                <p>
                    Laura Garza says a crystalizing moment last spring came during a virtual end-of-the-year awards ceremony.
                </p>
                <a class="link">Read More</a>
            </div>
        </div>
    </div>
    </div>
</section>

block quote

Example

This is a quote pulled from story/post lorem ipsum dolar set ut lacinia pharetra dictum sit amet nulla in imperdiet aen ean. Donec pharetra dictum euismod. Donec at dignissim leo, nec pretium mi.

Back to Top
<section class="block-quote container my-5">
    <div class="block-quote--quote">
        <p>
            This is a quote pulled from story/post lorem ipsum dolar set ut lacinia pharetra dictum sit amet nulla in imperdiet aen ean. Donec pharetra dictum euismod. Donec at dignissim leo, nec pretium mi.
        </p>
    </div>
</section>

block two columns

Example

A new model of higher education delivering better outcomes

A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two in which you’ll reflect upon.

A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two in which you’ll reflect upon.

Back to Top
<section class="block-two container mb-5">
    <article class="flex">
        <header>
            <h2 class="color-pacific">
                A new model of higher education delivering better outcomes
            </h2>
        </header>
    <div class="block-two--column col-1">
        <div class="block-two--image">
            <img src="images/image5.png">
        </div>
        <div class="block-two--link my-2">
            <a class="link" href="#">This is a Link that can be long</a>
        </div>
        <div class="block-two--text">
            <p>A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two in which you’ll reflect upon.</p>
        </div>
    </div>

    <div class="block-two--column col-2">
        <div class="block-two--image">
            <img src="images/image6.png">
        </div>
        <div class="block-two--link my-2">
            <a class="link" href="#">This is a Link that can be long</a>
        </div>
        <div class="block-two--text">
            <p>A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two in which you’ll reflect upon.</p>
        </div>
    </div>
    </article>

</section>

blockquote image

Example

I love working at Relay because we take the work seriously, but not ourselves. It's a mission-driven place where I can bring my full self to work.

Alia McCants, Managing Director of Student Services

Back to Top
<section class="quote-image container">
    <div class="flex justify-center quote-wrapper">
        <div class="quote-image--image">
            <img src="images/image20.png">
        </div>
        <div class="quote-image--text">
            <div class="quote-image--quote">
                <p>
                    I love working at Relay because we take the work seriously, but not ourselves.
                    It's a mission-driven place where I can bring my full self to work.
                </p>
            </div>
            <div class="quote-image--author color-pacific">
                <p>
                    Alia McCants, Managing Director of Student Services
                </p>
            </div>
        </div>
    </div>
</section>

callout

Example

Section title will go here

A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two in which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students.

Learn More
Back to Top
<section class="callout bg-fog mb-5">
    <article class="container flex">
        <div class="callout-column col-1">
            <heading>
                <h2 class="big-size color-pacific">Section title will go here</h2>
            </heading>
            <div class="callout-text mb-3">
                <p>
                    A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two in which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students.
                </p>
            </div>
            <a class="link" href="#">Learn More</a>
        </div>
        <div class="callout-column col-2 ">
            <div class="callout-image mt-5">
                <img src="images/image3.png">
            </div>
        </div>
    </article>
</section>

card three columns

Example

Section title goes here

Card title and cta as a link will go here

Card title and cta as a link will go here

Card title and cta as a link will go here

Back to Top
<section class="card-three-column pb-6 pt-5 bg-sea-foam">
    <article>
        <header  class="container container pb-1">
            <h2>Section title goes here</h2>
        </header>

        <div class="flex mt-4 card-three-column--row container">
            <div class="card-column col-1 container">
                <div class="card-three-column--image">
                    <img src="/images/image9.png">
                </div>
                <div class="column container">
                    <div class="card-three-column--text">
                        <p>
                            Card title and cta as a link will go here
                        </p>
                    </div>
                </div>
            </div>
            <div class="card-column col-2 container">
                <div class="card-three-column--image">
                    <img src="/images/image12.png">
                </div>
                <div class="column container">
                    <div class="card-three-column--text">
                        <p>
                            Card title and cta as a link will go here
                        </p>
                    </div>
                </div>
            </div>
            <div class="card-column col-3 container">
                <div class="card-three-column--image">
                    <img src="/images/image13.png">
                </div>
                <div class="column container">
                    <div class="card-three-column--text">
                        <p>
                            Card title and cta as a link will go here
                        </p>
                    </div>
                </div>
            </div>

        </div>

    </article>
</section>

Example

Back to Top
<footer>

</footer>

image card

Example

Internal page title goes here

Relay’s programs prepare current and future teachers and education. Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor.

Back to Top

<section class="card-image card-text--right mb-5 container">
    <article>
        <header>
            <h1 class="color-crimson mb-5">Internal page title goes here</h1>
        </header>

        <div class="card-image--image">
            <img src="images/teacher1.png">
        </div>
        <div class="card-image--text bg-prussian">
            <p>
                Relay’s programs prepare current and future teachers and education.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam,
                purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor.
            </p>
        </div>
    </article>

</section>

navigation

Example

Lorem ipsum dolor sit amet consectetur adipiscing elit consequat eros diam praesent conubia, lacus natoque risus aptent habitasse sagittis vel per ligula porta. Duis nibh sociosqu imperdiet ornare curae lacus cum viverra porta cubilia urna, non diam felis arcu facilisis dictum litora nam tempor. Cras non dictumst eleifend facilisis sociosqu est, cursus euismod integer leo tempor. Diam libero rutrum risus maecenas eros nisi aenean facilisis duis cursus montes, dictum commodo euismod molestie congue venenatis massa dui volutpat sociosqu, cum curabitur metus in augue sagittis tortor conubia himenaeos bibendum. Placerat dictum nisi accumsan sed mi ullamcorper tortor lobortis augue, aliquam elementum a aenean euismod hendrerit nostra bibendum commodo vel, cursus montes porttitor sociis risus urna senectus pharetra. Facilisi netus dis enim in neque torquent natoque bibendum vestibulum, fames ut posuere pretium dictum mattis fermentum laoreet, venenatis sociosqu fusce sem dignissim dapibus auctor phasellus.
Back to Top
<div class="main">
<section class="nav">
    <nav class="main-nav">
        <div class="main-nav--bar">
            <div class="main-nav--icon">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            
            <div class="logo">
                <img src="images/icons/logo.svg">
            </div>
            <div class="logo-mobile">
                <img src="images/icons/logo_mobile.svg">
            </div>
            <div class="contact-link">
                <a href="tel:+222121212">
                    <span class="contact-icon"></span>
                </a>
            </div>
        </div>

        <div class="parent-menu">
            <h3>Main Menu</h3>
            <ul>
                <li>
                    <a class="no-hover" href="#">Home</a>
                </li>
                <li class="expanded"><a class="no-link" href="#">Our Programs</a>
                    <div class="submenu">
                        <h3>Our Programs</h3>
                        <div class="submenu-block">
                            <h4>For Individuals</h4>
                            <ul>
                                <li><a href="#">Masters of Arts in Teaching</a></li>
                                <li><a href="#">Alternate Certification</a></li>
                                <li><a href="#">Certifications</a></li>
                                <li><a href="#">Professional Education</a></li>
                                <li><a href="#">Leadership Programs</a></li>
                            </ul>
                        </div>
                        <div class="submenu-block">
                            <h4>For Organizations</h4>
                            <ul>
                                <li><a href="#">Teacher Pipeline</a></li>
                                <li><a href="#">Continuing Education</a></li>
                            </ul>
                        </div>
                        <div class="menu-back">
                            <a class="back" href="#">Back</a>
                        </div>
                    </div>

                </li>

                <li class="expanded"><a class="no-link" href="#">The Relay Experience</a>

                    <div class="submenu">
                        <h3>The Relay Experience</h3>
                        <ul>
                            <li><a href="#">item 7</a></li>
                            <li><a href="#">item 8</a></li>
                            <li><a href="#">item 9</a></li>
                            <li><a href="#">item 10</a></li>
                            <li><a href="#">item 11</a></li>
                            <li><a href="#">item 12</a></li>
                        </ul>
                        <div class="menu-back">
                            <a class="back" href="#">Back</a>
                        </div>
                    </div>
                </li>

                <li class="expanded"><a class="no-link" href="#">About Us</a>

                    <div class="submenu">
                        <h3>About Us</h3>
                        <ul>
                            <li><a href="#">item 13</a></li>
                            <li><a href="#">item 14</a></li>
                            <li><a href="#">item 15</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                        </ul>
                    </div>
                </li>

                <li class="expanded"><a class="no-link" href="#">Financial Aid</a>
                    <div class="submenu">
                        <h3>Financial Aid</h3>
                        <ul>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                        </ul>
                        <div class="menu-back">
                            <a class="back" href="#">Back</a>
                        </div>
                    </div>
                </li>

                <li class="expanded"><a class="no-link" href="#">Locations</a>
                    <div class="submenu">
                        <h3>Locations</h3>
                        <ul>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                        </ul>
                        <div class="menu-back">
                            <a class="back" href="#">Back</a>
                        </div>
                    </div>
                </li>

                <li class="expanded"><a class="no-link" href="#">Resources</a>
                    <div class="submenu">
                        <h3>Resources</h3>
                        <ul>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                        </ul>
                        <div class="menu-back">
                            <a class="back" href="#">Back</a>
                        </div>
                    </div>
                </li>

                <li class="expanded"><a class="no-link" href="#">Alumni</a>
                    <div class="submenu">
                        <h3>Alumni</h3>
                        <ul>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                        </ul>
                        <div class="menu-back">
                            <a class="back" href="#">Back</a>
                        </div>
                    </div>
                </li>
                <li class="expanded"><a class="no-link" href="#">Support Us</a>
                    <div class="submenu">
                        <h3>Support Us</h3>
                        <ul>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                        </ul>
                        <div class="menu-back">
                            <a class="back" href="#">Back</a>
                        </div>
                    </div>
                </li>
                <li class="expanded"><a class="no-link" href="#">News & Events</a>
                    <div class="submenu">
                        <h3>News & Events</h3>
                        <ul>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                        </ul>
                        <div class="menu-back">
                            <a class="back" href="#">Back</a>
                        </div>
                    </div>
                </li>
            </ul>

            <ul class="extra-links">
                <li>
                    <a class="no-hover" href="#">Library</a>
                </li>
                <li>
                    <a class="no-hover" href="#">Support</a>
                </li>
                <li>
                    <a class="no-hover" href="#">Student Portal</a>
                </li>
            </ul>

            <div class="search">
                <input type="search" placeholder="Search..">
            </div>
        </div>

    </nav>
</section>
    <section class="container" style="height: 900px; padding-top: 90px">
        Lorem ipsum dolor sit amet consectetur adipiscing elit consequat eros diam praesent conubia,
        lacus natoque risus aptent habitasse sagittis vel per ligula porta. Duis nibh sociosqu imperdiet
        ornare curae lacus cum viverra porta cubilia urna, non diam felis arcu facilisis dictum litora nam
        tempor. Cras non dictumst eleifend facilisis sociosqu est, cursus euismod integer leo tempor.

        Diam libero rutrum risus maecenas eros nisi aenean facilisis duis cursus montes, dictum commodo
        euismod molestie congue venenatis massa dui volutpat sociosqu, cum curabitur metus in augue sagittis
        tortor conubia himenaeos bibendum. Placerat dictum nisi accumsan sed mi ullamcorper tortor lobortis
        augue, aliquam elementum a aenean euismod hendrerit nostra bibendum commodo vel, cursus montes porttitor
        sociis risus urna senectus pharetra. Facilisi netus dis enim in neque torquent natoque bibendum vestibulum,
        fames ut posuere pretium dictum mattis fermentum laoreet, venenatis sociosqu fusce sem dignissim dapibus
        auctor phasellus.
    </section>
</div>

paragraphs

Example

Heading Two

A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two in which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students. Having completed the program and practiced daily, you’ll graduate confident and ready to ensure that all students in your classroom are learning and growing, both academically and personally.

You’ll also develop pedagogical expertise in your chosen subject area and learn strategies to educate the whole child. The targeted feedback you receive from professors and peers, coupled with unparalleled opportunities for authentic practice, will enable you to hone your skills and elevate your craft.

Heading Three

The Relay Master of Arts in Teaching (MAT) translates educational theory into practice in a highly effective two-year degree and certification* program.

  • Working with expert faculty.
  • You’ll learn proven teaching skills.
  • Build the mindsets necessary to lead a vibrant.
  • Learning-filled classroom.
Heading Five

The Relay Master of Arts in Teaching (MAT) translates educational theory into practice in a highly effective two-year degree and certification* program.

Back to Top
<div class="container mb-5">
<section class="paragraph">
    <article>
        <header>
            <h2 class="color-pacific">Heading Two</h2>
        </header>
        <p>
            A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two in
            which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students.
            Having completed the program and practiced daily, you’ll graduate confident and ready to ensure that all students
            in your classroom are learning and growing, both academically and personally.
        </p>
        <p> You’ll also develop pedagogical expertise in your chosen subject area and learn strategies to educate
            the whole child. The targeted feedback you receive from professors and peers, coupled with unparalleled
            opportunities for authentic practice, will enable you to hone your skills and elevate your craft.
        </p>
    </article>
</section>

<section class="paragraph mt-5">
    <article>
        <header>
            <h3 class="color-pacific">Heading Three</h3>
        </header>
        <p>
            The Relay Master of Arts in Teaching (MAT) translates educational theory into practice in a highly effective
            two-year degree and certification* program.

        </p>
        <ul class="bullets">
            <li>Working with expert faculty.</li>
            <li>You’ll learn proven teaching skills.</li>
            <li>Build the mindsets necessary to lead a vibrant.</li>
            <li>Learning-filled classroom.</li>
        </ul>

    </article>
</section>

<section class="paragraph mt-5">
    <article>
        <header>
            <h5 class="color-crimson">Heading Five</h5>
        </header>
        <p>
            The Relay Master of Arts in Teaching (MAT) translates educational theory into practice in a highly effective
            two-year degree and certification* program.
        </p>

    </article>
</section>
</div>

plain slider

Example

Subheading goes here

Heading goes here

Subheading goes here

Heading goes here

Back to Top
<section class="container">
    <section class="plain-slider--wrap">
        <div class="plain-slider slider">
            <div class="plain-slide">
                <div class="plain-slide--media">
                    <div class="plain-slide--video">
                        <iframe width="100%" height="531" src="https://www.youtube.com/embed/VewB9aV7Zpw?enablejsapi=1&controls=0&fs=0&iv_load_policy=3&rel=0&showinfo=0">
                        </iframe>
                    </div>
                </div>
                <div class="plain-slide--headings">
                    <div class="plain-slide--subheading">
                        <h6>Subheading goes here</h6>
                    </div>
                    <div class="plain-slide--heading">
                        <h3 class="underline">Heading goes here</h3>
                    </div>
                </div>
            </div>

            <div class="plain-slide">
                <div class="plain-slide--media">
                    <img src="images/image54.png">
                </div>
                <div class="plain-slide--headings">
                    <div class="plain-slide--subheading">
                        <h6>Subheading goes here</h6>
                    </div>
                    <div class="plain-slide--heading">
                        <h3 class="underline">Heading goes here</h3>
                    </div>
                </div>
            </div>

            <div class="plain-slide">
                <div class="plain-slide--media">
                    <img src="images/image54.png">
                </div>
            </div>

        </div>

        <div class="slider-controls">
            <div class="control plain-left slider-controls--left"></div>
            <div class="control plain-right slider-controls--right"></div>
        </div>
    </section>
</section>

program tabs

Example

First option
Overview
Program Options
Curriculum
Schedule

Overview

A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two in which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students. Having completed the program and practiced daily, you’ll graduate confident and ready to ensure that all students in your classroom are learning and growing, both academically and personally.

Teaching Residency

Those new to the teaching profession find Relay’s flagship MAT with a Teaching Residency program incredibly helpful. Not only will you learn from seasoned professionals as you complete your graduate degree coursework, but you will also earn a teaching certification and have an apprentice year where you will get hands-on classroom experience. This gradual on-ramp towards teaching and managing your classroom will give you the knowledge, skills, and confidence you need to excel as a teacher of record.

What you’ll get
  • Master of Arts in Teaching
  • Apprentice Year
  • Teaching Certification
Master’s Degree Only

If you’re already a teacher and are not seeking certification, this track will allow you to complete your MAT with a combination of in-person and online courses. This degree program will bolster your pedagogical knowledge and skills needed to advance your career and improve student outcomes.

What you’ll get
  • Master of Arts in Teaching
  • Teaching Certification

Program Options

A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two in which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students. Having completed the program and practiced daily, you’ll graduate confident and ready to ensure that all students in your classroom are learning and growing, both academically and personally.

You’ll also develop pedagogical expertise in your chosen subject area and learn strategies to educate the whole child. The targeted feedback you receive from professors and peers, coupled with unparalleled opportunities for authentic practice, will enable you to hone your skills and elevate your craft.

Curriculum

A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of year two in which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students. Having completed the program and practiced daily, you’ll graduate confident and ready to ensure that all students in your classroom are learning and growing, both academically and personally.

You’ll also develop pedagogical expertise in your chosen subject area and learn strategies to educate the whole child. The targeted feedback you receive from professors and peers, coupled with unparalleled opportunities for authentic practice, will enable you to hone your skills and elevate your craft.

Schedule

Lorem ipsum dolor sit amet consectetur, adipiscing elit montes turpis. At eros in ac malesuada faucibus velit vivamus quam, euismod suspendisse nascetur class blandit ut vel interdum, aliquam aptent mauris lacus imperdiet duis tortor. Egestas vestibulum nunc platea placerat lacinia pulvinar elementum cursus, urna curae ullamcorper turpis orci quisque blandit varius, eleifend gravida posuere eget facilisis tempus mauris.

You’ll also develop pedagogical expertise in your chosen subject area and learn strategies to educate the whole child. The targeted feedback you receive from professors and peers, coupled with unparalleled opportunities for authentic practice, will enable you to hone your skills and elevate your craft.

Back to Top
<section class="program-tabs ">
    <div class="program-tabs--headers container select">
        <div class="selectBtn" data-type="firstOption">First option</div>

        <div class="selectDropdown container-md">
            <div class="program-tabs--headers-head option active" data-target="program-option-1" data-type="1-option">
                Overview
            </div>
            <div class="program-tabs--headers-head option" data-target="program-option-2" data-type="2-option">
                Program Options
            </div>
            <div class="program-tabs--headers-head option" data-target="program-option-3" data-type="3-option">
                Curriculum
            </div>
            <div class="program-tabs--headers-head option" data-target="program-option-4" data-type="4-option">
               Schedule
            </div>
        </div>
    </div>
    <div class="program-tabs--tabs">
        <div id="program-option-1" class="program-tabs-tab active">
            <section class="paragraph container">
                <article>
                    <header>
                        <h2 class="color-pacific">Overview</h2>
                    </header>
                    <p>
                        A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of
                        year two in
                        which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students.
                        Having completed the program and practiced daily, you’ll graduate confident and ready to ensure
                        that all students
                        in your classroom are learning and growing, both academically and personally.
                    </p>
                </article>
            </section>

            <section class="program-option py-5">

                <div class="program-option--wrap">
                    <div class="program-option--item-wrap py-4">

                        <div class="program-option--col col-1">
                            <div class="program-option--col-col bg-fog border-orange">
                                <article>
                                    <header>
                                        <h5 class="color-prussian">Teaching Residency</h5>
                                    </header>
                                    <div class="program-option--col-text ">
                                        <p>
                                            Those new to the teaching profession find Relay’s flagship MAT with a
                                            Teaching Residency program incredibly helpful. Not only will you learn from
                                            seasoned
                                            professionals as you complete your graduate degree coursework, but you will
                                            also earn
                                            a teaching certification and have an apprentice year where you will get
                                            hands-on
                                            classroom experience. This gradual on-ramp towards teaching and managing
                                            your classroom
                                            will give you the knowledge, skills, and confidence you need to excel as a
                                            teacher
                                            of record.
                                        </p>
                                    </div>
                                </article>
                            </div>
                        </div>

                        <div class="program-option--col col-2">
                            <div class="program-option--col-col bg-sea-foam">
                                <article>
                                    <header>
                                        <h6 class="color-prussian">What you’ll get</h6>
                                    </header>
                                    <div class="program-option--col-text color-prussian">
                                        <ul>
                                            <li>Master of Arts in Teaching</li>
                                            <li>Apprentice Year</li>
                                            <li>Teaching Certification</li>
                                        </ul>
                                    </div>
                                </article>
                            </div>
                        </div>
                    </div>
                    <div class="program-option--item-wrap py-4">
                        <div class="program-option--col col-1">
                            <div class="program-option--col-col bg-fog border-orange">
                                <article>
                                    <header>
                                        <h5 class="color-prussian">Master’s Degree Only</h5>
                                    </header>
                                    <div class="program-option--col-text ">
                                        <p>
                                            If you’re already a teacher and are not seeking certification, this track
                                            will allow
                                            you to complete your MAT with a combination of in-person and online courses.
                                            This degree program will bolster your pedagogical knowledge and skills
                                            needed
                                            to advance your career and improve student outcomes.
                                        </p>
                                    </div>
                                </article>
                            </div>
                        </div>

                        <div class="program-option--col col-2">
                            <div class="program-option--col-col bg-sea-foam">
                                <article>
                                    <header>
                                        <h6 class="color-prussian">What you’ll get</h6>
                                    </header>
                                    <div class="program-option--col-text color-prussian">
                                        <ul>
                                            <li>Master of Arts in Teaching</li>
                                            <li>Teaching Certification</li>
                                        </ul>
                                    </div>
                                </article>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <div id="program-option-2" class="program-tabs-tab">


            <section class="paragraph container">
                <article>
                    <header>
                        <h2 class="color-pacific">Program Options</h2>
                    </header>
                    <p>
                        A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of
                        year two in
                        which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students.
                        Having completed the program and practiced daily, you’ll graduate confident and ready to ensure
                        that all students
                        in your classroom are learning and growing, both academically and personally.
                    </p>
                    <p> You’ll also develop pedagogical expertise in your chosen subject area and learn strategies to
                        educate
                        the whole child. The targeted feedback you receive from professors and peers, coupled with
                        unparalleled
                        opportunities for authentic practice, will enable you to hone your skills and elevate your
                        craft.
                    </p>
                </article>
            </section>

        </div>

        <div id="program-option-3" class="program-tabs-tab">

            <section class="paragraph container">
                <article>
                    <header>
                        <h2 class="color-pacific">Curriculum</h2>
                    </header>
                    <p>
                        A hallmark of the Relay MAT program is the Master’s Defense, a capstone project at the end of
                        year two in
                        which you’ll reflect upon your evolution as a teacher and the growth of your PK-12 students.
                        Having completed the program and practiced daily, you’ll graduate confident and ready to ensure
                        that all students
                        in your classroom are learning and growing, both academically and personally.
                    </p>
                    <p> You’ll also develop pedagogical expertise in your chosen subject area and learn strategies to
                        educate
                        the whole child. The targeted feedback you receive from professors and peers, coupled with
                        unparalleled
                        opportunities for authentic practice, will enable you to hone your skills and elevate your
                        craft.
                    </p>
                </article>
            </section>


        </div>

        <div id="program-option-4" class="program-tabs-tab">

            <section class="paragraph container">
                <article>
                    <header>
                        <h2 class="color-pacific"> Schedule</h2>
                    </header>
                    <p>
                        Lorem ipsum dolor sit amet consectetur, adipiscing elit montes turpis. At eros in ac malesuada
                        faucibus velit vivamus quam, euismod suspendisse nascetur class blandit ut vel interdum, aliquam
                        aptent mauris lacus imperdiet duis tortor. Egestas vestibulum nunc platea placerat lacinia
                        pulvinar elementum cursus, urna curae ullamcorper turpis orci quisque blandit varius, eleifend
                        gravida posuere eget facilisis tempus mauris.

                    </p>
                    <p> You’ll also develop pedagogical expertise in your chosen subject area and learn strategies to
                        educate
                        the whole child. The targeted feedback you receive from professors and peers, coupled with
                        unparalleled
                        opportunities for authentic practice, will enable you to hone your skills and elevate your
                        craft.
                    </p>
                </article>
            </section>


        </div>

    </div>
</section>

slider

Example

Our Impact

Card title here

We seek team members who are passionate about improving outcomes for all children and who want to be part of an institution that is rethinking how educators are prepared.

Our Impact

Card title here

We seek team members who are passionate about improving outcomes for all children and who want to be part of an institution that is rethinking how educators are prepared.

Back to Top
<div id="cards-1" class="slider internal card-slider container">

    <div class="card-slide">
        <div class="flex">
            <div class="col-1 card-slider--image">
                <div class="card-slider--image-image">
                    <img src="/images/image7.png">
                </div>
                <div class="card-slider--image-title">
                    <h4 class="underline">Our Impact</h4>
                </div>
                <div class="card-slider--image-square"></div>
                <div class="card-slider--image-controls">
                    <div class="slider-controls">
                        <div class="control slider-controls--left"></div>
                        <div class="control slider-controls--right"></div>
                    </div>
                </div>
            </div>

            <div class="col-2 card-slider--text bg-pacific">
                <article>
                    <header>
                        <h2>Card title here</h2>
                        <p>
                            We seek team members who are passionate about improving outcomes for all children and
                            who want to be part of an institution that is rethinking how educators are prepared.
                        </p>
                    </header>
                </article>
            </div>
        </div>
    </div>

    <div class="card-slide">

        <div class="col-1 card-slider--image">
            <div class="card-slider--image-image">
                <img src="/images/image7.png">
            </div>
            <div class="card-slider--image-title">
                <h4 class="underline">Our Impact</h4>
            </div>
            <div class="card-slider--image-square"></div>
            <div class="card-slider--image-controls">
                <div class="slider-controls">
                    <div class="control slider-controls--left"></div>
                    <div class="control slider-controls--right"></div>
                </div>
            </div>
        </div>

        <div class="col-2 card-slider--text bg-pacific">
            <article>
                <header>
                    <h2>Card title here</h2>
                    <p>
                        We seek team members who are passionate about improving outcomes for all children and
                        who want to be part of an institution that is rethinking how educators are prepared.
                    </p>
                </header>
            </article>
        </div>
    </div>
</div>

tabs

Example

Tab One Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image caption will go here at Relay, our staff members strive to exemplify our core values.

Tab Two Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab Three Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Back to Top
<section class="tabs container">
    <input type="radio" name="tabs" id="tab-one" checked="checked">
    <label for="tab-one">Tab One <span class="pointer"></span></label>
    <div class="tab">
        <h3>Tab One Content</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <div class="image-caption mt-4">
        <img src="/images/image17.png">
        <div class="image-caption--caption">
            Image caption will go here at Relay, our staff members strive to exemplify our core values.
        </div>
        </div>
    </div>

    <input type="radio" name="tabs" id="tab-two">
    <label for="tab-two">Tab Two <span class="pointer"></span></label>
    <div class="tab">
        <h3>Tab Two Content</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <input type="radio" name="tabs" id="tab-three">
    <label for="tab-three">Tab Three <span class="pointer"></span></label>
    <div class="tab">
        <h3>Tab Three Content</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</section>

two columns offset

Example

Practice before you Teach

The Relay Teaching Residency is a unique teacher preparation program that offers a supportive and powerful pathway for aspiring teachers to begin a rewarding career in the classroom, while serving their communities and making a lasting impact on children.

Back to Top
<section class="two-column-offset bg-fog my-5">
    <div class="container py-6 two-column-offset--wrap">
        <div class="column column-left">
            <article>
                <header>
                    <h2 class="color-pacific">
                        Practice before you Teach
                    </h2>
                </header>
                <div class="text">
                    <p>
                        The Relay Teaching Residency is a unique teacher preparation program that offers a supportive
                        and powerful pathway for aspiring teachers to begin a rewarding career in the classroom,
                        while serving their communities and making a lasting impact on children.
                    </p>
                </div>
            </article>
        </div>

        <div class="column column-right">
            <div class="media">
                <iframe width="100%" src="https://www.youtube.com/embed/pgk-719mTxM?enablejsapi=1&controls=0&fs=0&iv_load_policy=3&rel=0&showinfo=0">
                </iframe>
            </div>
        </div>
    </div>

</section>