Foreign Affairs Style Guide

Homepage Module -- Crisis Hero

This component is the crisis hero and appears on the homepage.

Redline Notes:

Crisis Primary Image-This image is uploaded as the primary crisis image. The image changes on rollover of a featured crisis article.

Crisis Head-editorial can set to align Left, Right, and Center

Crisis Head-consists of a slug, a headline, and a deck. None of these are clickable / go anywhere.

Crisis Head-Color options for the 3 above text elements are limited to Light Yellow, Dark Yellow, Ultra Light Blue, Light Blue, or White

Primary Head-For each article, slug and headline are shown. Headline is chosen automatically by linked article headline. Slug is CUSTOM and is NOT automated (Raw Text). This means it could be dates or words.

Rollover- On rollover (shown center) article moves up, colors change a glow appears, and deck for the article is revealed providing more detail on article. THE BACKGROUND IMAGE ALSO CHANGES TO THE IMAGE OF THE ROLLED ARTICLE. Note complicated gradient on rollover background. This is technically 3 gradients to create a more interesting glow.

Rollover-On click of an article, the crisis UI *could* follow the user to the article page, allowing for continued browsing. It could also just load the article page as normal.

Data Sources:

Crisis Primary Image

selector: .crisis-hero-image
data_source: field_image_single

slug

selector: .crisis-head__slug
data_source: field_text_slug

headline

selector: .crisis-head__title
data_source: title

deck

selector: .crisis-head__deck
data_source: field_subtitle

Fearuted articles

selector: .crisis-article-list-item item-{number}
data_source: field_crisis_articles
comments: there are an unlimited number of these articles so {number} in the selector can be any thing form 1 to a very large number

Images Styles:

Name: x-large

Known Omissions:

Crisis Primary Image does not change.

There is no way to select the display color(s) of the fields in the Crisis Head.

There is no field to represent the 'custom' text for the article slugs.

There is not field to allow or disallow the 'Crisis UI' to 'follow' the user to a linked article page.

Oct. 28 2013

Bridge to Somewhere This title should be about four lines.

This is the deck copy. It is a bit longer than the rest of the deck copy.

<section class="crisis-hero" style="background-image: url('../assets/images/crisis.jpg');"> <div class="crisis-hero-gradient"> <div class="crisis-hero-image" style="background: linear-gradient(to top, #222222, rgba(34, 34, 34, 0) 20%), url('../assets/images/crisis.jpg') no-repeat 0 50%/cover;"></div> <div class="container"> <div class="l-crisis"> <header class="crisis-head"> <h3 class="crisis-head__label">Nature vs Nurture</h3> <h1 class="crisis-head__title">A Change in Climate</h1> <h2 class="crisis-head__deck">Stories of nations putting aside their differences in the face of global, catastrophic consequences.</h2> </header> <div class="crisis-article-list"> <article class="crisis-article-list-item"> <a class="crisis-article-list-item-link" href="#"> <span class="crisis-article-circle"> </span> <h5 class="crisis-article-list-item__slug"><time pubdate datetime="2013-10-28" title="October 28th, 2013">Oct. 28 2013</time></h5> <div class="crisis-article-titleblock"> <h4 class="crisis-article-list-item__title">Bridge to Somewhere This title should be about four lines.</h4> <p class="crisis-article-list-item__deck">This is the deck copy. It is a bit longer than the rest of the deck copy.</p> </div> </a> </article> <article class="crisis-article-list-item"> <a class="crisis-article-list-item-link" href="#"> <span class="crisis-article-circle"> </span> <h5 class="crisis-article-list-item__slug"><time pubdate datetime="2013-10-28" title="October 28th, 2013">Oct. 28 2013</time></h5> <div class="crisis-article-titleblock"> <h4 class="crisis-article-list-item__title">Bridge to Somewhere slightly longer</h4> <p class="crisis-article-list-item__deck">This is the deck copy.</p> </div> </a> </article> <article class="crisis-article-list-item"> <a class="crisis-article-list-item-link" href="#"> <span class="crisis-article-circle"> </span> <h5 class="crisis-article-list-item__slug"><time pubdate datetime="2013-10-28" title="October 28th, 2013">Oct. 28 2013</time></h5> <div class="crisis-article-titleblock"> <h4 class="crisis-article-list-item__title">Bridge to Somewhere This title should be about four lines.</h4> <p class="crisis-article-list-item__deck">This is the deck copy. It is a bit longer than the rest of the deck copy.</p> </div> </a> </article> <article class="crisis-article-list-item"> <a class="crisis-article-list-item-link" href="#"> <span class="crisis-article-circle"> </span> <h5 class="crisis-article-list-item__slug"><time pubdate datetime="2013-10-28" title="October 28th, 2013">Oct. 28 2013</time></h5> <div class="crisis-article-titleblock"> <h4 class="crisis-article-list-item__title">Bridge to Somewhere longish</h4> <p class="crisis-article-list-item__deck">This is the deck copy.</p> </div> </a> </article> <article class="crisis-article-list-item"> <a class="crisis-article-list-item-link" href="#"> <span class="crisis-article-circle"> </span> <h5 class="crisis-article-list-item__slug"><time pubdate datetime="2013-10-28" title="October 28th, 2013">Oct. 28 2013</time></h5> <div class="crisis-article-titleblock"> <h4 class="crisis-article-list-item__title">Bridge to Somewhere This title should be about four lines.</h4> <p class="crisis-article-list-item__deck">This is the deck copy.</p> </div> </a> </article> <article class="crisis-article-list-item"> <a class="crisis-article-list-item-link" href="#"> <span class="crisis-article-circle"> </span> <h5 class="crisis-article-list-item__slug"><time pubdate datetime="2013-10-28" title="October 28th, 2013">Oct. 28 2013</time></h5> <div class="crisis-article-titleblock"> <h4 class="crisis-article-list-item__title">Bridge to Somewhere This title should be about four lines.</h4> <p class="crisis-article-list-item__deck">This is the deck copy. It is a bit longer than the rest of the deck copy.</p> </div> </a> </article> </div> </div> </div> </div> </section>