footer

The footer should go on at the bottom of all pages. In keeping with the changes in 1.11.3, raw SVG code is used in lieu of CSS classes. This allows us to use the same code in AMP for these elements as our regular stories.
EXAMPLE

The footer is included in the story deck, and is better represented there.
HTML

<footer class="impact">
  <section class="footer">
    <div class="package footer-connect">
      <h3>CONNECT</h3>
      <p class="summary">Get Miami Herald's Pulitzer Prize-winning news coverage, photos, video, and more wherever you are.</p>
      <div class="flex">
        <div class="icon">
          <img src="https://www.newsobserver.com/wps/build/images/newsobserver/apple-touch-icon-57-precomposed.png">
        </div>
        <a class="h4 more-link icon-label" href="#">MARKET APP</a>
      </div>
      <div class="flex">
        <svg viewBox="0 0 512 512"><path d="M512 464c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V200.724a48 48 0 0 1 18.387-37.776c24.913-19.529 45.501-35.365 164.2-121.511C199.412 29.17 232.797-.347 256 .003c23.198-.354 56.596 29.172 73.413 41.433 118.687 86.137 139.303 101.995 164.2 121.512A48 48 0 0 1 512 200.724V464zm-65.666-196.605c-2.563-3.728-7.7-4.595-11.339-1.907-22.845 16.873-55.462 40.705-105.582 77.079-16.825 12.266-50.21 41.781-73.413 41.43-23.211.344-56.559-29.143-73.413-41.43-50.114-36.37-82.734-60.204-105.582-77.079-3.639-2.688-8.776-1.821-11.339 1.907l-9.072 13.196a7.998 7.998 0 0 0 1.839 10.967c22.887 16.899 55.454 40.69 105.303 76.868 20.274 14.781 56.524 47.813 92.264 47.573 35.724.242 71.961-32.771 92.263-47.573 49.85-36.179 82.418-59.97 105.303-76.868a7.998 7.998 0 0 0 1.839-10.967l-9.071-13.196z"/></svg>
        <a class="h4 more-link icon-label" href="#">VIEW NEWSLETTERS</a>
      </div>
      <div class="flex social">
        <a href="#facebook">
          <svg viewBox="0 0 264 512"><path d="M215.8 85H264V3.6C255.7 2.5 227.1 0 193.8 0 124.3 0 76.7 42.4 76.7 120.3V192H0v91h76.7v229h94V283h73.6l11.7-91h-85.3v-62.7c0-26.3 7.3-44.3 45.1-44.3z"/></svg>
        </a>
        <a href="#twitter">
          <svg viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
        </a>
        <a href="#youtube">
          <svg viewBox="0 0 576 512"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>
        </a>
        <a href="#instagram">
          <svg viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
        </a>
      </div>
    </div>
    <div class="footer-links">
      <div class="package">
        <h5>SUBSCRIPTIONS</h5>
        <a href="#">Start a Subscription</a>
        <a href="#">Customer Service</a>
        <a href="#">eEdition</a>
        <a href="#">Vacation Hold</a>
        <a href="#">Pay Your Bill</a>
        <a href="#">Rewards</a>
      </div>
      <div class="package">
        <h5>LEARN MORE</h5>
        <a href="#">About Us</a>
        <a href="#">Contact Us</a>
        <a href="#">News in Education</a>
        <a href="#">Public Insight Network</a>
        <a href="#">Reader Panel</a>
      </div>
      <div class="package">
        <h5>ADVERTISING</h5>
        <a href="#">Place a Classified</a>
        <a href="#">Media Kit</a>
        <a href="#">Commercial Printing</a>
        <a href="#">Public Notices</a>
        <a href="#">Shopping</a>
      </div>
    </div>
  </section>
</footer>
<section class="bottom-nav h5">
  <a href="#">COPYRIGHT</a>
  <a href="#">COMMENTING POLICY</a>
  <a href="#">PRIVACY POLICY</a>
  <a href="#">TERMS OF SERVICE</a>
</section>
footer

EXAMPLE

HTML

CARDS

DECKS

MOLECULES

ATOMS
