Product Logo

The product logo mark is used on Knight Lab software, such as TimelineJS. It can be rendered in four sizes.

Timeline JS

				
<h1 class="product-logo product-logo-smallest">Timeline <span>JS</span></h1>
<h1 class="product-logo product-logo-smaller">Timeline <span>JS</span></h1>
<h1 class="product-logo product-logo-small">Timeline <span>JS</span></h1>
<h1 class="product-logo">Timeline <span>JS</span></h1>
<h1 class="product-logo product-logo-large">Timeline <span>JS</span></h1>

Logos

Available with and without taglines, padding (useful for colored backgrounds or crowded layouts), and transparent backgrounds.

Horizontal Logos

Transparent background, no padding, 400px by 120px
Transparent background, no padding, 691px by 206px
Transparent background, no padding, 400px by 120px
Transparent background, no padding, 400px by 120px

Footer

Standard footer for the bottom of most Knight Lab pages.

Handlebars

A partial can be used for handlebars called > footer.

                
<footer class="footer-knightlab--dark">
    <div class="container">
        <div class='grid grid-center'>
            <div class='column-2 column-4-phone column-4-tablet'>
                <a href="http://knightlab.northwestern.edu" target="_blank">
                    <img src="https://cdn.knightlab.com/libs/orangeline/latest/assets/logo-knightlab-stacked-dark-small.png" style="margin-left:auto;">
                </a>
                <ul class="list--social text-align-center">
                    <li><a class="link--no-style" href="http://www.twitter.com/knightlab" target="_blank" title="Knight Lab on Twitter"><span class="icon-twitter"></span></a></li>
                    <li><a class="link--no-style" href="https://www.facebook.com/knightlab" target="_blank" title="Knight Lab on Facebook"><span class="icon-facebook"></span></a></li>
                    <li><a class="link--no-style" href="https://github.com/NUKnightLab/" target="_blank" title="Knight Lab on GitHub"><span class="icon-github"></span></a></li>
                </ul>
            </div>
            <div class='column-4 column-5-tablet column-6-phone footer-description'>
                <p>
                    The <a title="Northwestern University" href="http://www.northwestern.edu/" target="_blank">Northwestern University</a> Knight Lab is a team of technologists and journalists working at advancing news media innovation through exploration and experimentation.
                </p>
                <div class="grid-size-2 grid-size-2-phone">
                    <div class="grid-item">
                        <a title="Medill School of Journalism, Media, Integrated Marketing Communications" href="http://www.medill.northwestern.edu/" target="_blank">
                            <img src="https://cdn.knightlab.com/libs/orangeline/latest/assets/logo-medill-dark.png">
                        </a>
                    </div>

                    <div class="grid-item">
                        <a title="McCormick School of Engineering" href="http://www.mccormick.northwestern.edu/" target="_blank">
                            <img src="https://cdn.knightlab.com/libs/orangeline/latest/assets/logo-mccormick-dark.png">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid grid-center">
            <div class="grid-item">
            <address itemscope="" itemtype="http://data-vocabulary.org/Organization">
                <span style="display:none;" itemprop="name" title="Knight Lab | Advancing news media innovation through exploration and experimentation." class="address-name">Knight Lab</span>
                <span itemprop="tel" class="tel">(847) 467-4971</span>
                <span itemprop="address" itemscope="" itemtype="http://data-vocabulary.org/Address" class="address">
                    <span itemprop="street-address" class="street-address">1845 Sheridan Road</span>
                    <span class="room-num">Fisk #109 &amp; #111</span>
                    <div class="address-group">
                        <span itemprop="locality">Evanston,</span> <span itemprop="region">IL</span> <span itemprop="postal-code">60208 </span>
                        <span style="display:none;" itemprop="geo" itemscope="" itemtype="http://www.data-vocabulary.org/Geo/" class="geo">
                            Latitude: <span itemprop="latitude">42.056893</span><br>Longitude:
                            <span itemprop="longitude">-87.676735</span>
                        </span>
                        <a style="display:none;" href="http://knightlab.northwestern.edu" itemprop="url" class="url">Northwesten University Knight Lab | Advancing media innovation through exploration and experimentation.</a>
                    </div>
                </span>
            </address>
            <span class="copyright">© Copyright 2017 Northwestern University</span>
            </div>
        </div>
    </div>
</footer>

<script src="js/main.js"></script>