The header at the top of body on an Interview page
<header class="l-article-header">
<div class="article-header--interview">
<div class="article-header__metadata--interview">
<span class="article-header__metadata-topic">Interview</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-tags">
<a class="article-header__metadata-tag-item" href="#">US Policy</a>
<a class="article-header__metadata-tag-item" href="#">Global Commons</a>
<a class="article-header__metadata-tag-icon--more" href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="31.1 741 937.8 610.1" enable-background="new 31.1 741 937.8 610.1" xml:space="preserve">
<g>
<polygon points="500,1351.1 31.1,882.1 52.3,741 500,1188.7 947.7,741 968.9,882.1 "/>
</g>
</svg>
</a>
<a class="article-header__metadata-tag-icon" href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-0.4 475 1000.4 601.7" enable-background="new -0.4 475 1000.4 601.7" xml:space="preserve">
<path d="M18.3,728.3c-25,26.7-25,68.3,0,95l225,233.3c11.7,11.7,28.3,20,46.7,20h645c35,0,65-30,65-66.7V543.3
c0-36.7-28.3-66.7-65-66.7L290,475c-18.3,0-33.3,8.3-45,20l0,0L18.3,728.3z M268.3,518.3c5-6.7,13.3-10,21.7-10h645
c18.3,0,31.7,15,31.7,33.3v466.7c0,18.3-15,33.3-31.7,33.3H290c-10,0-16.7-3.3-23.3-10l0,0l-225-233.3c-13.3-13.3-13.3-33.3,0-46.7
L268.3,518.3L268.3,518.3L268.3,518.3z M168.3,833.3c31.7,33.3,83.3,33.3,115,0s31.7-85,0-118.3c-31.7-33.3-83.3-33.3-115,0
C136.7,748.3,136.7,801.7,168.3,833.3z M258.3,740c18.3,20,18.3,51.7,0,70c-18.3,20-50,20-68.3,0c-18.3-20-18.3-51.7,0-70
C210,720,240,720,258.3,740z"/>
</svg>
</a>
<div class="tag-dropdown">
<h4 class="tag-dropdown-header">Read More On... <a href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="6.1 563.4 993.8 986.6" enable-background="new 6.1 563.4 993.8 986.6" xml:space="preserve">
<path d="M745.1,1034.6H520.1V809.8c0-10.9-7.3-18.2-18.2-18.2c-10.9,0-18.2,7.3-18.2,18.2v224.8H259.1c-10.9,0-18.2,7.3-18.2,18.2
c0,10.9,7.3,18.2,18.2,18.2h224.8v224.8c0,7.3,7.3,14.5,18.2,14.5c10.9,0,18.2-7.3,18.2-18.2v-224.8h224.8
c10.8,0,18.2-7.3,18.2-18.2C763.2,1042,752.2,1034.6,745.1,1034.6z M502,570.4c-268.3,0-485.9,214-485.9,482.3
c0,264.8,217.6,482.4,485.9,482.4s485.9-214,485.9-482.4C988,788,770.4,570.4,502,570.4z M502,1498.9
c-250.2,0-449.7-199.4-449.7-446.1S255.5,606.7,502,606.7c250.2,0,449.7,199.4,449.7,446.1S748.6,1498.9,502,1498.9z"/>
</svg>
</a></h4>
<a class="article-header__tag-dropdown-item" href="#">US Policy</a>
<a class="article-header__tag-dropdown-item" href="#">Global Commons</a>
<a class="article-header__tag-dropdown-item" href="#">Business</a>
<a class="article-header__tag-dropdown-item" href="#">Globalization</a>
<a class="article-header__tag-dropdown-item" href="#">China</a>
<a class="article-header__tag-dropdown-item" href="#">Infrastructure Investment or an Even Longer Name</a>
<a class="article-header__tag-dropdown-item" href="#">Domestic Policy</a>
</div>
</span>
</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>