CPBS Landing Template

A two-column responsive template used for the Center for Pacific Basin Studies 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

  1. Section header

    Wrap header with <header class="section-header">. Define section further with <h3> and <a id="section-header-ed">; color is from class="education". 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 desktop-only text overlay.

  5. Learn more (mobile)

    Add a link to "Learn more about CPBS" with class="mobile" near top of the page on mobile screens only.

  6. Sub-section styles

    Contains links, publication titles, and teasers to sub-sections of Economic Research. 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.

  7. Related boxes

    Wrap related boxes with <div> .landing-did-you-know class; additional info boxes with .landing-additional class. Use <h3> on header; box class will dictate header style.

    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 boxes stack to the bottom of the page.

  8. Conferences

    For special Past Conferences box, which dynamically pulls event info from CPBS events page, use class="landing-events" with inline "background-color: #f6f5f4". Header is <h3>. Wrap conference info with article tag, and further with div class="highlight". Style title link with h4 and conference info with <p class="meta date">, with an additional style="margin-top: 10px" for alignment.