Foreign Affairs Style Guide

Sponsored Detail Header

The header at the top of body on an Sponsored detail page

Data Sources:

Type

selector: .article-header-metadata__topic
data_source: node type
comments: The content type label can be used for this field, or just a fixed string.

Date

selector: .article-header-metadata__date
data_source: field_date

Tags

selector: .article-header-metadata-tag-list__item
data_source: field_regions & field_topics
comments: The regions tags are displayed before the topics tags.

Title

selector: .article-header__headline
data_source: title

Subtitle

selector: .article-header__deck
data_source: field_subtitle

Known Omissions:

Show more tags arrow / mobile behavior for tags

Redmine Ticket: 30117

      <header class="detail__sponsored-header">
  <div class="article-header">
    <div class="article-header__metadata-container">
      <div class="detail-header__metadata">
       
  <span class="article-header__metadata-topic">Sponsor 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>