Board of Directors Bio Template*

A one-column page used for lists of boards of directors.

*Uses default template with the specific layout below.

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 Boards of Directors 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. Header

    Use <h1> for header and <p> for effective date. Style subheader with <h3>.

  5. Bio image and info

    Lay out director info by first wrapping image with <div class="m-all t-all d-all"> <div class="d-2of12 t-2of12 m-all p-3of12">

    Place the bio info in a <div class="d-10of12 t-10of12 m-all p-9of12"> <p class="margin-top-none">. This ensures bio info stacks on mobile.