Foreign Affairs Style Guide

Foreign Affairs

Newsletter Overlay - 2


Newsletter overlay option. Note that all 5 newsletter overlay options use identical markup except for a singular class name.

      <div class="newsletter-backdrop">
  <div class="newsletter-modal v2" role="dialog" aria-labelledby="newsletter-head">
    <div class="newsletter-modal-content">
      <div class="newsletter-modal-close">
        <span class="close-button">
          <a href="javascript:void(0)" class="close-button-a"><span aria-hidden="true">&times;</span> <span
              class="element-invisible">Close dialog</span></a>
        </span>
      </div>
      <div class="newsletter-modal-container">
        <div class="newsletter-overlay-img"
          style="background-image: url('/fa_prototype/assets/images/responsiveimg/story-teaser-orig.jpg')"></div>
        <header class="newsletter-overlay-head">
          <h2 class="newsletter-head" id="newsletter-head">Understand the world you live and work in.</h2>
        </header>
        <div class="newsletter-overlay-content">
          <section class="newsletter-overlay-body">
            <p>Sign up for our newsletter to stay on top of important global issues.</p>
          </section>
          <section class="newsletter-overlay-form">
            <form class="newsletter-compact__form" action="/" method="post" id="fa-newsletter-email-signup"
              accept-charset="UTF-8">
              <div class="newsletter-overlay-inputs">
                <div class="form-item form-type-textfield form-item-email" style="margin-bottom: initial;">
                  <label class="element-invisible" for="edit-email--2">Email <span class="form-required"
                      title="This field is required."></span></label>
                  <input placeholder="Enter Your Email" size="26" maxlength="60"
                    class="newsletter-overlay-input required" type="text" id="edit-email--2" name="email" value="">
                </div>
                <input
                  class="newsletter-overlay-submit ajax-processed faom-selector=form%23fa-newsletter-email-signup+.form-submit&amp;location=article-footer&amp;name=newsletter-signup&amp;event="
                  type="submit" id="edit-submit--2" name="op" value="Sign Up">
              </div>
              <div class="d-none form-wrapper" id="edit-fa-name-container">
                <div class="form-item form-type-textfield form-item-fa-name" style="margin-bottom: initial;">
                  <label for="edit-fa-name">Name </label>
                  <input type="text" id="edit-fa-name" name="fa_name" value="" size="60" maxlength="128"
                    class="form-text">
                </div>
              </div><input type="hidden" name="newsletter_key" value="fa_booksreviews">
              <input type="hidden" name="location" value="newsletter-overlay">
              <input type="hidden" name="form_build_id" value="form-G_Rwvu_y-LiNaBd8j-7BNz0Sg9Rl2-o1ojrpc6XRHZQ">
              <input type="hidden" name="form_token" value="X4eNDPqJKwzlBK6XkML1fFyrzRabisLH93kOVF_tioA"><input
                type="hidden" name="form_id" value="fa_newsletter_email_signup">
            </form>
          </section>
        </div>
      </div>
    </div>
  </div>
</div>