This is the header on an event detail page.
Upcoming Event
-
<div class="event-header-main">
<!-- Article tools at desktop -->
<div class="event-titleblock">
<p class="event-label">Upcoming Event</p>
<h1 class="event-title">International Trade and Drone Ships</h1>
<p class="event-date"><time pubdate datetime="2014-02-24" title="February 24, 2014">February 24</time>-<time pubdate datetime="2014-02-27" title="February 27, 2014">27, 2014</time> <button class="event-register button__red-solid-reversed">Register</button></p>
<div class="event-location">
<div class="vcard">
<div class="fn org">Foreign Affairs</div>
<div class="adr">
<div class="street-address">P.O. Box 60001</div>
<span class="locality">Tampa</span>, <span class="region">FL</span> <span class="postal-code">33662-0001</span>
</div>
</div>
<a class="event-location__directions"href="#">Get Directions</a>
<div class="event-contact">Questions? <a href="#">Click here to get in touch.</a></div>
</div>
</div>
<div class="share">
<a class="share__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="41.6 316.6 916.7 916.7" enable-background="new 41.6 316.6 916.7 916.7" xml:space="preserve">
<title>Facebook</title>
<path d="M805.6,1233.3H194.4c-84,0-152.8-68.8-152.8-152.8V469.4c0-84,68.7-152.8,152.8-152.8h611.1c84,0,152.8,68.8,152.8,152.8
v611.1C958.3,1164.6,889.6,1233.3,805.6,1233.3z M656.6,507.6C515.3,507.6,500,622.2,500,622.2v114.6h-76.4v114.6H500V1157h114.6
V851.4h106.9l15.3-114.6H614.6v-76.4c0-38.2,38.2-38.2,38.2-38.2h76.4l15.3-99.3C710.1,507.6,656.6,507.6,656.6,507.6z"/>
</svg>
</a>
<a class="share__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="49.1 417.8 883.5 714.4" enable-background="new 49.1 417.8 883.5 714.4" xml:space="preserve">
<title>Twitter</title>
<path d="M926.2,501.7c-31.1,15.5-65.2,24.8-102.5,27.9c37.3-21.7,65.2-59,77.6-99.4c-34.2,21.7-71.4,34.2-111.8,43.5
c-34.2-34.2-80.7-55.9-130.4-55.9c-99.4,0-177,80.7-177,180.1c0,15.5,3.1,27.9,3.1,40.4c-149.1-6.2-279.5-77.6-366.5-186.3
c-15.5,24.8-24.8,55.9-24.8,90.1c0,62.1,31.1,118,77.6,149.1c-31.1,0-52.8-9.3-83.8-21.7c0,0,0,0,0,3.1c0,87,62.1,161.5,146,177
c-15.5,3.1-31.1,3.1-46.6,3.1c-12.4,0-21.7,0-34.2-3.1C174.6,921,243,973.8,320.6,973.8c-62.1,49.7-136.6,77.6-220.5,77.6
c-15.5,0-27.9,0-43.5-3.1c77.6,52.8,173.9,83.9,273.3,83.9c329.2,0,506.2-273.3,506.2-512.4c0-6.2,0-15.5,0-21.7
C873.4,570,901.3,539,926.2,501.7z"/>
</svg>
</a>
<a class="share__icon" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12"><defs></defs><path d="M16 8.5V.9l-3.3 3.76L16 8.5zM0 .75v8.73l3.79-4.41L0 .75zM15.46 0H.67l7.4 8.4L15.46 0z"/><path d="M12.03 5.42l-3.96 4.5-3.61-4.1L0 11.02V12h16v-1.96l-3.97-4.62z"/></svg></a>
<a class="share__icon myfa-save-anthology-login" 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>
<div id="modalSave" class="close-modal">
<div id="modalBackdrop" class="modal-back-save" 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" class="anthologies-hero">
<div class="ctools-modal-content modal-forms-modal-content" style="width: 387px; 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;">
<div class="save-article-progress">
<div class="icon">
<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>
</div>
<div class="progress-container">
<div class="progress" id="progressBar">
<div class="rounded">
<div class="progress-bar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<h4 id="status-saving">You've saved this anthology.</h4>
<h4 id="status-saved">You've already saved this anthology.</h4>
<a class="link-saved" href="#">See all saved anthologies</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="modalSaveAnon" class="close-modal">
<div id="modalBackdrop" class="modal-back-save-anon" 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" class="anthologies-hero">
<div class="ctools-modal-content modal-forms-modal-content" style="width: 350px; 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;">
<div class="save-article-progress">
<div class="icon">
<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>
</div>
<div class="anonymous-save-message">
<h3>SAVE TO READ LATER</h3>
<h4>You must be registered to save anthologies.</h4>
<center>
<a class="button-anonymous btn-anthologies button__blue button-login" href="#">Sign In</a>
<a class="button-anonymous btn-anthologies button__red-reversed--light" href="#">REGISTER NOW</a>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>