Portland Community College | Portland, Oregon Portland Community College

Program award pages

Program award pages have content that is mostly automatically generated. They include a similar hero image and next steps section to program homepages.


Required program award pages components:

  1. The award name in the following format:
    • aas-shortname (for AAS degrees)
    • cert2-shortname (for 2-year certs)
    • cert1-shortname (for 1-year certs)
    • cert-shortname (for less than 1-year certs)
    • pathway-shortname (for career pathways)
    • focus-shortname (for focus awards)
  2. A large hero image showing the particular award.
  3. Generated from the programs database:
    1. A callout with links to the class schedule and catalog (in the sidebar).
    2. A table showing the award’s details.
    3. The locations where you can earn the award, with icons.
    4. A list of required classes (pulled from the catalog).
    5. Next steps that are similar to those on program homepages but exclude the related programs.


Program award pages resemble content pages, 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 award page example

Numbered components
  1. header, global navigation
  2. site title
  3. award name
  4. hero photo showing the specific award
  5. content area – can include an optional description of the specific award and a callout with timely information, if necessary.
  6. award table showing only the specific award
  7. list of locations with icons
  8. list of courses
  9. next steps action callout, more info links
  10. sidebar
  11. class information
    • Any (optional) other callouts added to the sidebar will appear below the class information.
  12. footer
  13. Other:

page type: program award page desktop