Economist Bio Template (Banking, CD, Education)

A one-column page used to showcase Fed economist biographies and published works.

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-er">; color is from class="economic-research". 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 Economists landing page, ensuring href has id="page-title-ed-economists".

  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 economist info by wrapping image with <div class="bio-container-top">, then with <div class="bio-image">. Shape circular image via CSS with "border-radius: 50%".

    Define economist name and title container with <div class="bio-text">. Style name with <h1>; title with <h3 class="h5">; specializations with <p>; and email with <p class="meta">.

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

  5. CV box

    Create this with <a href="#" class="pdf"> <p id="cv">CV</p></a>. It will automatically add pdf-arrow icon.

  6. Collapsible header

    Nest the following tags to create the collapsible header:
    <section class="show-section cf">
    <header class="category">
    <div class="m-9of12 t-10of12 d-10of12 m-o-1of12 t-o-1of12 d-o-1of12 aligncenter">

    Style header text with <h6 class="section-title-assets">.
    Call the plus or minus icon, depending on state of visibility of content below, with <div class="d-1of12 alignright"><img src="../assets/images/icon-minus.png" class="icon hideshow" width="30" height="30" alt="Hide this section">.

    Script toggles plus or minus on user input, and hides or shows the content below.

  7. Article (toggleable visibility)

    Enclose each category of economist's published work with <article style="display: block"> (or display: none). Visibility will toggle depending on user input on plus-minus icon above.

    Style article title with <h5>.

  8. Abstract collapsible

    Abstracts or supplements start out collapsed. Create the toggle link via <div class="info"><a class="tog" href="#"><span>+</span> abstract</a>

    Place the abstract or supplement in a <div class="collapsible" style="display: none;">, switching "display" attribute as appropriate.