Foreign Affairs Style Guide

Sponsored Article -- Header

The header at the top of body on Sponsored Article page. This component should be a variant of Article -- Header.

Redmine Prototyping Ticket(s)

Data Sources:

Label

selector: @todo
data_source: static text
comments: example - SPONSOR CONTENT

Date

selector: @todo
data_source: field_date

Presented Label

selector: @todo
data_source: field_sponsor
comments: This is possible combination of static text and image. Example - Presented by Boing (Boing is an image). The image will be served from Google DFP

Title

selector: @todo
data_source: title

Subtitle

selector: @todo
data_source: field_subtitle

Author

selector: @todo
data_source: field_display_authors

<header class="l-article-header">
  <div class="article-header">
    <div class="article-header__metadata-container">
      <div class="article-header__metadata--sponsored">
       
  <span class="article-header__metadata-topic">Sponsored Content</span>


  <time pubdate datetime="2013-11-13" title="November 13, 2013" class="article-header__metadata-date">November/December 2017 Issue</time>



<span class="article-header__metadata-sponsor">
  <span class="sponsor">Presented by <a href="#">
    <img class="metadata-sponsor__logo" src="/fa_prototype/assets/images/boeing-white.png" alt="" />
  </a>
</span>
</span>



      </div>
    </div>
    
    <h1 class="article-header__headline f-serif">Bridge to Somewhere</h1>
    <h2 class="article-header__deck f-serif">Helping U.S. Companies Tap the Global Infrastructure Market</h2>
















  </div>
</header>