Hero Image and Text

To create this, wrap with a <section> tag with id #sf-fed-mission, which JavaScript targets to hide the section when desktop user scrolls. (See scripts.js). Create an inner wrapper with an <article> tag.

Code a containing <div> for the image; the hero image itself must be placed as a CSS background in #sf-fed-mission (so that it hides properly).

Wrap mission text with a <div> class="mission" and create an inner <div> with class="mission_text".

Blog Container

Define the blog feature container with an outer <div> for "-all" screens, then a <div> inner container with grid parameters that describe desktop layout ("d-8of12 d-o-2of12").

Blog container body

Style inner content with class .blog_container_inner_text. For the header, use <h1> with class="blog-title"; hero is class="blog-image". Use <div> class="blog_text" for blog teaser and <h1> for the title.

Use <h4> class="related" on the Read more link, as on all "related" links on the home page. Code it twice: one for desktop with class="view-more desktop", the link text ending with a right chevron or greater-than symbol (>); and for mobile with class="view-more mobile" with no chevron.

Economic Letter container

Define the Economic Letter feature container with an outer <div class="el_container_outer m-all t-all d-all cf">, with background image originating from the CSS; and an inner <div class="el_container_inner m-all t-all d-8of12 d-o-2of12">.

Economic Letter container body

Style body text with <div class="el_container_inner_text">. Use <div class="el_title"> and <h1> for the header; <div class="el_text"> for body text.

Use <h1> on the title link, and refer to annotation 3 for "View Past Economic Letter" style.

News container

Define with an outer wrapper <div class="news_container_outer m-all t-all d-all cf">; then an inner <div class="news_container_inner m-all t-all d-8of12 d-o-2of12">.

News container body

Divide the container into two columns to define the desktop view. Responsive columns rearrange and stack on mobile.

Left column is <div class="news_column m-all t-5of12 d-5of12 t-o-1of12 d-o-1of12">. Use offset grid t-o and d-o for alignment.

Right column is <div class="news_column m-all t-5of12 d-5of12">.

#unreserved container

Define with an outer wrapper div class="stories_container_outer"> (-all grid classes); and inner div class="stories_container_inner"> (desktop with offset).

This visually translates to a desktop screen with an inner box with margins on four sides; and a mobile one where the inner div spans the width of the screen.

#unreserved container body

Define the body style with <div class="stories_container_inner_text">.

Style blog title link using <div class="stories_title">. Wrap inner content with <div class="stories_image_pullquote">.

Lay out image using <div class="m-all t-5of12 d-5of12">; and text using <div class="stories_pullquote m-all t-7of12 d-7of12">. These two elements will span and stack on mobile.

Careers container

Wrap section with an outer <div class="work_container_outer m-all t-all d-all cf">; then and inner <div class="work_container_inner m-all t-all d-8of12 d-o-2of12">.

Careers container body

Define body text with <div class="work_container_inner_text">. Wrap image and text with <div class="work_image_pullquote">.

Wrap the image in <div class="m-all t-5of12 d-5of12">. Wrap the text in <div class="work_pullquote m-all t-7of12 d-7of12">. Boxes will stack and span mobile width.

For "Find a Job" link, code for desktop with <p class="related desktop">; and for mobile with <p class="related mobile">.