Foreign Affairs Style Guide

Foreign Affairs

Browse List Item -- Article


This is the list view of a standard article, or any article without a specific list view.

Data Sources:
Images Styles:
Known Omissions:
<article class="list__row-meta--dark browse-list-item">
  <div class="meta">
    <span class="topic"><a href="#">Bologna</a></span>
    <span class="save"><a class="save-article" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 18"><defs></defs><polygon points="0 0 0 18 6.03 13.96 12 18 12 0 0 0"/></svg></a></span>
    <span class="date"><time pubdate datetime="2011-08-28" title="August 28th, 2011">March/April 2005</time></span>
    <span class="type"><a href="#">Article</a></span>
  </div>

  <div class="clearfix">
    <div class="data-block">
      <div class="hover-tools--browse">
        <a class="hover-tools--helpers save-article" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 18"><defs></defs><polygon points="0 0 0 18 6.03 13.96 12 18 12 0 0 0"/></svg><span class="hover-tools--helpers__helper">Save this article</span></a>
      </div>
      <a href="#">
        
        <h2 class="title">A Phony Farewell to Arms</h2>
        <p class="summary">Why Assad Won't Have to Part with Poison Gas</p>
      </a>
      <div class="author" rel='author'>Amy E. Smithson</div>
      
      
      
        <p class="deck">Today, inspectors from the Organization for the Prohibition of Chemical Weapons (OPCW) are due to arrive in Damascus, Syria, where they will begin the exceptionally difficult process of destroying Syrian...</p>
      
    </div>
    <div class="thumb">
      <div class="browse-results-list-article__image">
        <a href="#">
          <img src="/fa_prototype/assets/images/news-thumb.jpg" />
        </a>
      </div>
    </div>
  </div>

  <div id="modalDeleteArticle" class="close-modal">
    <div id="modalBackdrop" style="z-index: 1000; position: absolute; top: 0px; left: 0px; right: 0; bottom: 0; margin: 0px; opacity: 0.55; background: rgb(0, 0, 0);"></div>
      <div id="modalContent">  
        <div class="ctools-modal-content modal-forms-modal-content" style="width: 480px; height: 300px;">
          <div class="popups-container">
  
            <div class="modal-header popups-title">
              <span class="popups-close close">Close</span>
              <div class="clear-block"></div>
            </div>
  
            <div class="modal-scroll">
              <div id="modal-content" class="modal-content popups-body" style="width: 275px; height: 255px;"><form action="/modal_forms/ajax/save/1113809" method="post" id="fa-myfa-save-form" accept-charset="UTF-8" class="ctools-use-modal-processed">
                <div>
                  <div class="save-article-progress">
                    <div class="icon">
                      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
                        <g>
                        <path d="M518.143,0H93.857v792L306,650.571L518.143,792V0L518.143,0z"></path>
                        </g>
                      </svg>
                    </div>
                    <div class="progress-container">
                      <div id="progressBar" class="progress"></div>
                      <h4 id="status-saved" class="save-done  small-text" style="display: block;">
                      You've already saved this article.  </h4>
                      <a class="link-saved" href="/my-foreign-affairs/saved-articles">
                      See all saved articles &gt;  </a>
                    </div>
                  </div>
                  <input type="hidden" name="form_build_id" value="form-qFB5u1qFOzblmdPuD4129-Ex0Jd-6HL88SAzeBKAxlY">
                  <input type="hidden" name="form_token" value="8E4IOawR4iRHPW98MOR9TXMu0OrQmtnCTOTGcMKuHiU">
                  <input type="hidden" name="form_id" value="fa_myfa_save_form">
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</article>