Education Landing Template

A two-column responsive template used for the Education landing page.

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

  1. Section header

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

  2. Main body

    Below the section header, wrap the content with <div id="outer-content" class="wrap cf"> and with an inner wrapper <div id="inner-content">.

  3. Columns

    Create two columns:
    left with <article role="article" class="m-all t-all d-8of12 landing">;
    right with <article role="article" class="m-all t-all d-4of12">. Right rearranges to bottom of page on mobile.

  4. Hero image and text

    Wrap with a <section> tag, then <div class="landing-hero">. Use <img class="hero"> for image and <p> for desktop-only text overlay.

  5. Sub-section styles

    Contains links, publication titles, and teasers to sub-sections of Education. Use <header class="entry-header" style="width:100%"> to wrap sub-section header link; style with <h2 class="landing-section-title">.

    Wrap featured publications within sub-sections with <article> tag, publication title with <h3 class="landing-pub-title">. For the section to make sense visually, apply <h3 class="h2"> to the title link.

  6. Social media box

    Wrap the social media container in a <div> "landing-follow-section desktop" to house icons and links to social media sites that CD uses.

  7. Related boxes

    Wrap related boxes with <div> .landing-did-you-know class; additional info boxes with .landing-additional class. Use <h3> on header; box class will dictate header style.

    Text in box is a <p> that has a .mobile or .desktop class, which determines whether the link has an arrow (right chevron or greater-than symbol). On mobile, these boxes stack to the bottom of the page.

  8. Upcoming events

    For special Upcoming events box, which dynamically pulls event info from Education events page, use class="landing-events" with inline "background-color: #f6f5f4". Display calendar icon next to header "Upcoming Events," which is styled with <h3>.

  9. Audio sub-section

    Use a video screen grab for sub-section hero image (size 632 x 321, responsive). Additionally, style image caption with a <p class="landing-section-subtitle">.

  10. View More or Related

    Style View More link as <h4>, once for desktop with class "desktop" and again for mobile with class "mobile", which determines whether the link shows an arrow (right chevron or greater-than symbol). Apply this to similar links in Related boxes.