Cash Landing Template

A two-column responsive template used for the Cash landing page.

Resize window to see mobile.

page screenshot
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10

  1. Section header

    Wrap header with <header class="section-header">. Define section further with <h3> and <a id="section-header-bsr">; color is from class="cash". On scroll on desktop and tablet, JavaScript will affix header to top (with Menu and Search). (See scripts.js.)

  2. Main body

    Below the section header, wrap the content with <div id="outer-content" class="wrap cf"> and with an inner wrapper <div id="inner-content">.

  3. Columns

    Create two columns:
    left with <article role="article" class="m-all t-all d-8of12 landing">;
    right with <article role="article" class="m-all t-all d-4of12">. Right rearranges to bottom of page on mobile.

  4. Hero image and text

    Wrap with a <section> tag, then <div class="landing-hero">. Use <img class="hero"> for image and <p> for text.

  5. Sub-section styles

    Contains links, publication titles, and teasers to sub-sections of Cash. Use <header class="entry-header" style="width:100%"> to wrap sub-section header link; style with <h2 class="landing-section-title">.

    Wrap featured publications within sub-sections with <article> tag, publication title with <h3 class="landing-pub-title">. For the section to make sense visually, apply <h3 class="h2"> to the title link. Text will be in a <p>.

  6. View More or Related

    Style View More link as <h4>, once for desktop with class "desktop" and again for mobile with class "mobile", which determines whether the link shows an arrow (right chevron or greater-than symbol).

  7. Social media box

    Wrap the social media container in a <div> of class="landing-follow-section desktop" to house icons and links to social media sites that Cash uses.

  8. Related boxes

    Wrap related boxes with <div> .landing-did-you-know class; additional info boxes with .landing-additional class.

    Header is <h3>.

    Text in box is a <p> that has a .mobile or .desktop class, which determines whether the link has an arrow (right chevron or greater-than symbol). On mobile, these stack to the bottom of the page.

  9. Poll

    Use .landing-additional class for Cash feedback poll box to house the contain the survey code.

  10. Video sub-section

    Use a video screen grab for sub-section hero image (size 785 x 441). Use <h5> for the title link; additionally, style image caption with a <p class="landing-section-subtitle">.