Banking Landing Template

A two-column responsive template used for the Banking, Supervision, and Regulation 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="banking". 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 Banking. 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 Banking uses.

  8. Related boxes

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

    Style header for primary box with <h3>; additional with <h3 class="heading-bg">.

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

  9. Upcoming events

    For this special Related box, which dynamically pulls event info from Asia Program events page, use class="landing-events" with inline "background-color: #f6f5f4". Display calendar icon next to header "Upcoming Events" styled with <h3>.

  10. PacEx blog hero

    In addition to the styles noted in annotation 5, wrap Pacific Exchange Blog hero image with class="attachment-full size-full" of size 670 x 268.