Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Credits and bylines
Credits and bylines can be put in many different places and styles.
Top bylines
The following is an example that spreads across the whole line. This is the usual style for an article.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div class="byline byline-spread">
<address>By
<a rel="author" href="http://example.com/author">John Doe</a>
<span class="spacer"></span>
Photos by <a rel="author" href="http://example.com/author">Jane Doh</a>
</address>
<span class="spacer"></span>
Star Tribune
<time pubdate datetime="2017-07-30T16:00:00">July 30, 2017 — 4:00pm</time>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>An alternate approach is one that is all together.
<div class="byline">
<address>By
<a rel="author" href="http://example.com/author">John Doe</a>
and
<a rel="author" href="http://example.com/author">Jane Doh</a>
</address>
<span class="spacer"></span>
Star Tribune
<span class="spacer-alt"></span>
<time pubdate datetime="2017-07-30T16:00:00">July 30, 2017 — 4:00pm</time>
</div>And finally, a more spaced out, but not justified approach.
<div class="byline byline-space">
<address>
Story by <a rel="author" href="http://example.com/author">John Doe</a>
<span class="spacer"></span>
Photos by <a rel="author" href="http://example.com/author">Jane Doh</a>
</address>
<span class="spacer"></span>
Star Tribune
<time pubdate datetime="2017-07-30T16:00:00">July 30, 2017</time>
</div>Footer bylines
This is a general style for credits at the bottom of the article.
<article>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<footer class="article-footer">
<div class="byline">
<address>
<a rel="author" href="mailto:john.doe@example.com">john.doe@example.com</a>
<a rel="author" href="tel:1-555-555-5555">(555) 555-5555</a>
</address>
</div>
</footer>
</article>For a more expanded footer with multiple credits.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<article>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<footer class="article-footer">
<h1>Credits</h1>
<ul class="credits">
<li>Edited by John DoeEditor</li>
<li>Data analysis by Jane DoeData</li>
<li>Design and development by Jem DoeDesign</li>
</ul>
<h1>Methodology</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</footer>
</article>