Foreign Affairs Style Guide

Homepage Module -- Book of the Day

This component appears on the homepage in a page break and on the sidebar within the listview of the homepage.

Redmine Prototyping Ticket(s)

Redline Notes:

Book cover image is from corresponding book review. For reviews with more than one associated title, first cover displayed on detail page is shown here.

Clicking cover image or “Read the Capsule Review” CTA loads Article-Review Essay or Article-Capsule Review detail page.

When a Review Essay is featured, bottom CTA should read “Read the review”.

Admin should have option to create a queue of Book of the Day items.

Data Sources:

cover_image

selector: .book-of-the-day__image
data_source: field_image_single
comments: The image field from core

Images Styles:

Name: medium

<section class="book-of-the-day">
  <header>
    <span class="book-of-the-day-icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="153.8 275 692.4 1000" enable-background="new 153.8 275 692.4 1000" xml:space="preserve">
<path d="M830.8,421.2L326.9,275c-3.8,0-11.5,0-15.4,3.8l-150,115.4c-7.7,3.8-7.7,11.5-7.7,19.2V1125l523.1,150V555.8L196.2,413.5
	l130.8-100l480.8,142.3v703.8c0,11.5,7.7,19.2,19.2,19.2s19.2-7.7,19.2-19.2V440.4C846.2,432.7,842.3,425,830.8,421.2z"/>
</svg>
</span>
    <h2 class="book-of-the-day__title">Book of the Day</h2>
  </header>
  <a href="#">
    <div class="book-of-the-day__image"><img src="/fa_prototype/assets/images/book-of-the-day.jpg"/></div>
    <span class="book-of-the-day__dropshadow"></span>
    <p class="book-of-the-day__action">Read the Capsule Review ></p>
  </a>
</section>