<article>
  <header class="noimg">
    <h1>
      Article headline
    </h1>
    <p class="author">
      <em>By Author Name</em><br />Occupation of author
    </p>
  </header>
  <section class="with-figure">
    <figure class="full-width">
      <img alt="photo 1" src="http://placekitten.com/g/500/300" />
    </figure>
  </section>
</article>
      

<article>
  <header style="background-image:url(http://placeimg.com/1000/800/any);">
    <div class="mid-align blurred">
      <h1>
        Article headline
      </h1>
      <p class="author">
        <em>By Author Name</em><br />Occupation of author
      </p>
    </div>
  </header>
</article>
      

<article>
  <footer>
    <ul class="staff-listing-detailed">
      <li>
        <a href="#">
          <div class="frame">
            <img src="http://placeimg.com/100/100/people" />
          </div>
          <strong>Author Name</strong>
          <p>
            Occupation of author
          </p>
        </a>
      </li>
    </ul>
    <div class="republish-wrapper">
      <div class="share">
        <ul>
          <li class="twitter">
            <a href="#"><svg class="icon" role="img"><use xlink:href="#icon-twitter"></use></svg> Twitter</a>
          </li>
          <li class="facebook">
            <a class="facebook" href="#"><svg class="icon" role="img"><use xlink:href="#icon-facebook"></use></svg> Facebook</a>
          </li>
          <li class="linkedin">
            <a href="#"><svg class="icon" role="img"><use xlink:href="#icon-linkedin"></use></svg> LinkedIn</a>
          </li>
        </ul>
      </div>
      <div class="republish">
        <a class="button-small soft" data-modal-target="republish1" href="#">Republish</a>
        <div class="modal__dialog" id="republish1">
          <a class="modal__close">Close</a>
          <h1>
            Republish
          </h1>
          <p>
            We believe in the free flow of information. We use a Creative Commons license, so you can republish our articles for free, online or in print.
          </p>
          <p class="center">
            <a class="button with-arrow" href="#">Republish</a>
          </p>
        </div>
      </div>
    </div>
    <div class="categories">
      <p>
        Written in <a href="#">Category</a>, <a href="#">Category 2</a>, <a href="#">Category 3</a>, <a href="#">Category 4</a>
      </p>
    </div>
    <p class="credit">
      This article originally appeared on <a href="#">The Conversation</a> on 7 April. <a href="#">View the original here</a>.
    </p>
  </footer>
</article>