Foreign Affairs Style Guide

Homepage Module -- Lead Story

This component highlights lead stories with a large background image and prominent title. It appears as a list item beneath the hero area on the homepage. There are 9 layout variants for the title box—top-left (default), top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center, and bottom-right.

Redline Notes:

For articles that appear in the magazine, the post date will be replaced by that magazine’s issue date Month1 / Month2 YYYY Issue

Editorial can set to align Left, Right, Center, (and preferably also Top and Bottom).

Bars above headline and byline are transparent with 10% black overlay. We would like to stress that this detail is important and should not represent a high LOE if you have trouble, let’s talk.

Longer headlines can run onto second and third lines, but subsequently begin to clip longer ‘decks’ below. Spacing between headline and deck are always consistent, but box can get shorter or taller within reason.

Headline limit 4 lines, Deck limit 4 lines, Author limit 2 lines, Note that not all of these are possible in combination. Limits were written with 1100 pixel viewport in mind, and smaller viewports will likely require less lines of text to be available for use.

Longer text is truncated with elipses. Headline takes precedence over decks (long headline = shorter/truncated deck, but long deck does not mean truncated headline).

Mobile-Headline, subhead, and author name are truncated after one line each — note bylines should not include “by”.

Mobile-Date of publication (or issue, for print articles) and content type are displayed above blue rule.

Mobile-No tags, images, or excerpts shown.

Images Styles:

Name: x-large

Paywall-Free

Washington's Secret Weapon Against Chinese Hackers

Applying the Lessons of Counterterrorism and Counterproliferation in Cyberspace

Zachary K. Goldman

Economic Relations

May 7, 2014

Jonathan Doe / Reuters

<article class="lead-story" data-src-low="../assets/images/clear.png" data-src-medium="../assets/images/responsiveimg/fpo-lead-story-1000.jpg|../assets/images/responsiveimg/fpo-lead-story-orig.jpg" data-src="../assets/images/responsiveimg/fpo-lead-story-orig.jpg"> <div class="paywall-free-badge"> Paywall-Free </div> <div class="container"> <div class="l-lead-story-1up"> <div class="lead-story-container"> <header class="lead-story-block--featured--left_center"> <a href="#" class="lead-story__headline--node_path"> <div class="lead-story-bar"> <div class="metadata--lead-story"> </div> </div> <div class="lead-story-bar--margin"> <p class="paywall-free-text">Paywall-Free</p> <h2 class="lead-story__headline">Washington's Secret Weapon Against Chinese Hackers</h2> <h3 class="lead-story__deck">Applying the Lessons of Counterterrorism and Counterproliferation in Cyberspace</h3> </div> <div class="lead-story-bar--featured"> <h4 class="lead-story__author">Zachary K. Goldman</h4> </div> </a> <div class="lead-story__headline--section"> <a href="#">Economic Relations</a> </div> <div class="metadata--lead-story__date"> <time datetime="2014-05-07">May 7, 2014</time> </div> <div class="lead-story__save mobile-only"> <a class="save-article" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 18"><defs></defs><polygon points="0 0 0 18 6.03 13.96 12 18 12 0 0 0"/></svg></a> </div> </header> <span class="featured-lead-story__photo-credit">Jonathan Doe / Reuters</span> </div> </div> </div> </article> <article class="lead-story" data-src-low="../assets/images/clear.png" data-src-medium="../assets/images/responsiveimg/fpo-lead-story-1000.jpg|../assets/images/responsiveimg/fpo-lead-story-orig.jpg" data-src="../assets/images/responsiveimg/fpo-lead-story-orig.jpg"> <div class="container"> <div class="l-lead-story-1up"> <div class="lead-story-container"> <header class="lead-story-block--featured--right_center"> <a href="#" class="lead-story__headline--node_path"> <div class="lead-story-bar"> <div class="metadata--lead-story"> </div> </div> <div class="lead-story-bar--margin"> <h2 class="lead-story__headline">Nagorno-Karabakh </h2> <h3 class="lead-story__deck">How Moscow Keeps the Conflict </h3> </div> <div class="lead-story-bar--featured"> <h4 class="lead-story__author">Brenda Shaffer</h4> </div> </a> <div class="lead-story__headline--section"> <a href="#">Terrorism in Africa</a> </div> <div class="metadata--lead-story__date"> <time datetime="2014-05-07">May 7, 2014</time> </div> <div class="lead-story__save mobile-only"> <a class="save-article" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 18"><defs></defs><polygon points="0 0 0 18 6.03 13.96 12 18 12 0 0 0"/></svg></a> </div> </header> <span class="featured-lead-story__photo-credit">Jonathan Doe / Reuters</span> </div> </div> </div> </article> <article class="lead-story" data-src-low="../assets/images/clear.png" data-src-medium="../assets/images/responsiveimg/fpo-lead-story-1000.jpg|../assets/images/responsiveimg/fpo-lead-story-orig.jpg" data-src="../assets/images/responsiveimg/fpo-lead-story-orig.jpg"> <div class="container"> <div class="l-lead-story-1up"> <div class="lead-story-container"> <header class="lead-story-block--featured--center"> <a href="#" class="lead-story__headline--node_path"> <div class="lead-story-bar"> <div class="metadata--lead-story"> </div> </div> <div class="lead-story-bar--margin"> <h2 class="lead-story__headline">Why Chinese-Japanese Economic Relations Are Improving</h2> <h3 class="lead-story__deck">Delinking Trade From Politics</h3> </div> <div class="lead-story-bar--featured"> <h4 class="lead-story__author">Brenda Shaffer</h4> </div> </a> <div class="lead-story__headline--section"> <a href="#">Economic Relations</a> </div> <div class="metadata--lead-story__date"> <time datetime="2014-05-07">May 7, 2014</time> </div> <div class="lead-story__save mobile-only"> <a class="save-article" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 18"><defs></defs><polygon points="0 0 0 18 6.03 13.96 12 18 12 0 0 0"/></svg></a> </div> </header> </div> </div> </div> </article>