Jobs Listing Page

A one-column page that displays jobs by career category.

Resize window to see mobile.

page screenshot
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5

  1. Section Header

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

  2. Hero image

    Use a hero image of size 960 x 132 and wrap inside a <header class="banner-image m-all t-all d-all cf">. Display a text overlay heading with <h1 class="banner-title"> <div> <h1 class="careers-heading">.

  3. Title (Career Category)

    Choose appropriate title based on current career categories from the Careers page, which the page then uses as basis for scraping. Style with <h1>.

  4. Related

    Use a simple <p> to list and separate related links.

  5. Available jobs (scraped)

    List all open jobs in the career category, enclosing the listing in a <div id="job_search_results_###">, where "###" is the id nomenclature given the category (for example, "rec" for Recent Graduates or Career Starters, ergo, "job_search_results_rec"). Job information will include title, job number, and posted date.