Office of the President Template

A mixed one- and two-column responsive template used for the FRBSF president bio.

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

  1. Section header

    Use <header> tag to create a section header container. Code class="section-header" to produce Our District color.

  2. Main Container

    Wrap the body of page with <div id="outer-content" class="wrap cf">, then an inner wrapper <div id="inner-content">.

  3. Headcrumb

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

  4. Main body content

    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 mainly functions as desktop and tablet layout.

  5. Body (article)

    Further wrap with <section class="entry-content cf">, treating actual body as article. Title is <h1 class="aligncenter">. img is also class="aligncenter" with dimensions 333 x 500; responsive images produced in WordPress srcset.

    Define President's name and title with <h5>, biography text with <p>.

  6. President's media container

    Create two-column responsive layout. First, clear of floats with <div class="clearfix">. Create header with <h5 class="section-title no-rule">.

    Define first and second columns with: <div class="m-all t-6of12 d-6of12 pres-media">. They will rearrange and stack on mobile screens.

  7. Recent president buttons container

    Create two-column responsive layout. First, clear of floats with <div class="clearfix">. Create header with <h5 class="section-title">.

    Define first column as a button with: <div class="m-all t-5of12 d-5of12 recent-pres-btn">; second with: <div class="m-all t-5of12 t-o-2of12 d-5of12 d-o-1of12 recent-pres-btn">. They will rearrange and stack on mobile screens.

  8. Past presidents container

    Clear of floats with <div class="clearfix">. Create header with Create header with <h5 class="section-title">.

  9. Past presidents slideshow and text

    Enclose body with <div class="past-presidents">. Call slideshow js from image and title: onclick="jQuery('a.presidents').eq(0).trigger('click'); return false;"

    Title is <h5>. Body is <p>.