About Bio Template (Banking, CD, Education)

A one-column page used for bio pages for Banking, Community Development, and Education staff.

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. Headcrumb

    Display the headcrumb nav with a <header class="section-header"> wrapper. Style the link text with h4 and link back to Economic Education Staff landing page, ensuring href has id="page-title-ed-staff".

  3. Main body

    Below the headcrumb, define body content with a wrapper <main id="main" class="m-all t-all d-all cf" role="main">. Define inner wrapper with <article role="article" class="m-all t-10of12 d-10of12 t-o-1of12 d-o-1of12">. This functions as desktop and tablet layout.

  4. Bio image and title

    Lay out staff info by wrapping image with <div class="bio-image"> and title with <div class="bio-text">. Style title thus: name with <h1 itemprop="name"> and title with <h3 class="h5">.

    Note that not all staff will have a photo, but in its absence, .bio-text spans. Additionally, it stacks on mobile screens.

  5. Body text

    Use <p> for each paragraph of the bio.