Useful patterns used for our publications and products.
Used at the bottom of articles or in lists.
<div class="author-bio">
<figure>
<img src="https://knightlab.northwestern.edu/assets/people/zlwise.jpg" />
</figure>
<div class="author-content">
<a href="https://knightlab.northwestern.edu/people/faculty/zach-wise/">
<h3>Zach Wise</h3>
</a>
<h4>Associate Professor</h4>
<p>
Emmy winning interactive producer & Associate Professor @NorthwesternU, @KnightLab. Formerly of The New York Times. Creator of TimelineJS & StoryMapJS
</p>
<ul class="list--social">
<li><a href="https://www.twitter.com/zlwise" target="_blank"><span class="icon-twitter"></span></a></li>
<li><a href="http://zachwise.com" target="_blank"><span class="icon-link"></span></a></li>
<li><a href="https://github.com/zachwise/" target="_blank"><span class="icon-github"></span></a></li>
<li><a href="https://instagram.com/zachwise" target="_blank"><span class="icon-instagram"></span></a></li>
<li><a href="https://www.linkedin.com/in/zachwise/" target="_blank"><span class="icon-linkedin"></span></a></li>
</ul>
</div>
</div>
Used at the bottom of articles or in lists.
<div class="author-bio--stacked">
<figure>
<img src="https://knightlab.northwestern.edu/assets/people/zlwise.jpg" />
</figure>
<div class="author-content">
<a href="https://knightlab.northwestern.edu/people/faculty/zach-wise/">
<h3>Zach Wise</h3>
</a>
<h4>Associate Professor</h4>
<p>
Emmy winning interactive producer & Associate Professor @NorthwesternU, @KnightLab. Formerly of The New York Times. Creator of TimelineJS & StoryMapJS
</p>
<ul class="list--social">
<li><a href="https://www.twitter.com/zlwise" target="_blank"><span class="icon-twitter"></span></a></li>
<li><a href="http://zachwise.com" target="_blank"><span class="icon-link"></span></a></li>
<li><a href="https://github.com/zachwise/" target="_blank"><span class="icon-github"></span></a></li>
<li><a href="https://instagram.com/zachwise" target="_blank"><span class="icon-instagram"></span></a></li>
<li><a href="https://www.linkedin.com/in/zachwise/" target="_blank"><span class="icon-linkedin"></span></a></li>
</ul>
</div>
</div>
Used in articles
<p class="byline">
by
<span class="author">
<a class="name" href="/people/jeannette-hinkle/">Jeannette Hinkle</a> |
<a href="https://twitter.com/Jenny_Hinkle">
<span class="icon-twitter"></span>Jenny_Hinkle
</a>
</span>
</p>