Portland Community College | Portland, Oregon Portland Community College

Program homepages

Program homepages are similar to content pages but have a few required components.


Required program homepage components:

  1. Contact information or link to a contact page in the site title area.
  2. A full-width hero image (see description of the types of images that should be used below).
  3. Content: There are three required headings followed by succinct, preferably short paragraphs or bulleted lists. In addition to the required content, programs can include a basic description of the program and a callout with timely or accreditation information if necessary. Required headings:
    1. Why study [program] at PCC?
    2. What will you learn?
    3. What will you do?
    4. (optional) Who will hire you?
  4. A callout with official salary information from the state.
  5. Generated from the programs database:
    1. A table showing the degrees and certificates available and general information about them.
    2. A list of locations with icons.
    3. A callout with links to the class schedule and catalog.
    4. Next steps info (how to apply to PCC and a link to the program application page when applicable).
    5. Get more info links (optional information sessions, connect with a program advisor, plan how to pay).
    6. Three related programs (determined by the program and Marketing) and a link to all programs.
Hero images
  • Must be horizontal and cropped to 1000 x 563px.
  • Require signed media release forms from all identifiable students.
  • Ideal photo content:
    • Shows PCC students actively engaged in the typical learning environment for the program.
    • Allows prospective students to picture themselves in the program.
    • Accurately represents our student population.

Additional photos, such as student work samples, can be incorporated into other places on the program site.


Program homepages resemble site homepages, but have required content and components (see above).

Responsive behavior

Program homepages don’t change drastically on small screens. No content is hidden when the screen size decreases (this is true across the entire website).

Development info

Program homepage example

Numbered components
  1. header, global navigation
  2. site title
  3. hero image
  4. content area
  5. “Why study [program] at PCC?” (required heading)
  6. official salary information from the state in an info callout
  7. degrees and certificates table
  8. list of locations with icons
  9. “What will you learn?” (required heading)
  10. class information (class schedule and catalog links)
  11. (optional) more information callout that links to sub-pages, news stories, advising guides, etc.
  12. “What will you do?” (required heading)
  13. (optional) “Who will hire me?”
  14. (optional) transfer or placement testing information in an info callout
  15. next steps action callout, more info links, related programs links
  16. footer
  17. Other:

page type: program homepage desktop