Style Guide

Components

Re-usable chunks of modular code that appear as part of TechnologyReview.com as a whole.

Story lead

HTML

<header class="story-lead">
    <h2 class="flag"><a href="/businessreports/">Business Report</a></h2>
    <h3>Computing News</h3>
    <h1>Rise of the Robot Security Guards</h1>
    <p class="intro">Startup Knightscope is preparing to roll out human-size robot patrols.</p>
    <p class="byline">By <a href="/author/rachel-metz/">Rachel Metz</a> on <time>November 13, 2014</time></p>
</header>

Preview

Story lead

Share widgets

Social media sharing widgets that appear vertically or horizontally

Preview

Share widgets vertical Share widgets horizontal

Vertical list

Vertical block list with large clickable buttons for in-page navigational elements.

HTML

<ul class="vertical-list">
    <li><a href="/list-item-uri/">List item</a></li>
    <li><a href="/list-item-uri/">List item</a></li>
    <li><a href="/list-item-uri/">List item</a></li>
    <li><a href="/list-item-uri/">List item</a></li>
    <li><a href="/list-item-uri/">List item</a></li>
    <li><a href="/list-item-uri/">List item</a></li>
    <li><a href="/list-item-uri/">List item</a></li>
</ul>

Preview

Vertical list

Utility bar

A sticky toolbar that appear at the top of every page in the site, providing a users with a consistent navigation at any viewport location throughout the site.

Preview

Toolbar

The main navigation is broken down into two link styles: primary and supporting. Supporting links appear to the right hand side of the menu in the MIT branded yellow (see color), while primary links appear on the left hand side of the navigation and take on a more prominent style.

HTML

<nav class="main-navigation">
    <ul class="primary-links">
        <li><a href="/features/">Features</a></li>
        <li><a href="/views/">Views</a></li>
        <li><a href="/multimedia/">Multimedia</a></li>
        <li><a href="/discussions/">Discussions</a></li>
        <li><a href="/topics/">Topics</a></li>
    </ul>
    <ul class="supporting-links">
        <li><a href="/stream/?sort=popular">Popular</a>:</li>
        <li><a href="/news/532311/a-battery-to-prop-up-renewable-power-hits-the-market/">Grid Battery</a></li>
        <li><a href="/news/532431/rise-of-the-robot-security-guards/">Robot Security</a></li>
        <li><a href="/news/532346/laser-radio-links-upgrade-the-internet/">Laser-Radio Wireless</a></li>
        <li><a href="/featuredstory/532421/the-search-for-exceptional-genomes/">Superpatients</a></li>
        <li><a href="/news/532666/googles-brain-inspired-software-describes-what-it-sees-in-complex-images/">Google AI Software</a></li>
        <li><a href="/view/531911/isaac-asimov-asks-how-do-people-get-new-ideas/">Asimov Exclusive</a></li>
        <li><a href="/news/532416/nanoparticle-detects-the-deadliest-cancer-cells-in-blood/">Cancer Tagging</a></li>
    </ul>
</nav>

Preview

Main Navigation

Promo

A promotional element that draws focus to a featured aspect or goal for viewers. This is sometimes referred to as a call to action.

HTML

<aside class="promo promo-navbar">
    <a href="/subscribe/">
        <img src="/img/magazine-cover.png" alt="MIT Technology Review Magazine Cover: November 2014">
        <span class="btn-promo">Subscribe</span>
    </a>
</aside>

Preview

Promotion graphic

Ads

Standard advertisement sizes and specs for TechnologyReview.com are as follows:

Ad type Dimensions Expansion size Direction Initial Max Looping Rich Media
Leaderboard 728 x 90 728 x 315 Down 40 KB 45 KB 3 Cycles Yes
Medium Rectangle 300 x 250 600 x 250 Left 40 KB 45 KB 3 Cycles Yes
Half Page 300 x 600 600 x 600 Left 40 KB 45 KB 3 Cycles Yes
Wide Skyscraper 160 x 600 -- Left 40 KB 45 KB 3 Cycles Yes
Super Leaderboard 970 x 90 -- -- 40 KB 45 KB 3 Cycles Yes
Welcome Ad 640 x 480 -- -- 60 KB 80 KB -- Yes
320 x 240 -- -- 30 KB 40 KB 3 Cycles Yes

Preview

Advertising example