Design Patterns

Useful patterns used for our publications and products.

Author

Author Bio

Used at the bottom of articles or in lists.

Zach Wise

Associate Professor

Emmy winning interactive producer & Associate Professor @NorthwesternU, @KnightLab. Formerly of The New York Times. Creator of TimelineJS & StoryMapJS

				
<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>
				
			

Author Bio Stacked

Used at the bottom of articles or in lists.

Zach Wise

Associate Professor

Emmy winning interactive producer & Associate Professor @NorthwesternU, @KnightLab. Formerly of The New York Times. Creator of TimelineJS & StoryMapJS

Zach Wise

Associate Professor

Emmy winning interactive producer & Associate Professor @NorthwesternU, @KnightLab. Formerly of The New York Times. Creator of TimelineJS & StoryMapJS

Zach Wise

Associate Professor

Emmy winning interactive producer & Associate Professor @NorthwesternU, @KnightLab. Formerly of The New York Times. Creator of TimelineJS & StoryMapJS

				
<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>
				
			

By-line

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>