Portland Community College | Portland, Oregon Portland Community College


Web features are a marketing tool conveying our core values and societal worth. They tell the compelling stories of the people of PCC. By presenting a face that people can relate to, we hope to enhance the community’s interest and personal investment in PCC.

Features exemplify the PCC vision through the stories of our students, faculty and staff. Each feature presents a profile of how a person’s life brought them to PCC and how the college has impacted their life. People and relationships are the focus, and the context is timely. Through personal stories, web features share the values of PCC as:

  • an outstanding educational institution,
  • a bridge between potential and achievement, and
  • an active participant in our diverse community.


  • Web features are not:
    • a sales tool for individual programs or classes
    • press releases
    • event announcements
  • Headlines and descriptions do not generally use “PCC” or “Portland Community College” as part of the text. The home page already provides this reference.
  • Headlines reflect the person’s story (not the program or department)

Development info

  • Stylesheet location: /source-v6/styles/applications/_home.scss
  • Image:
    • Featured image in WordPress
    • 1400px by 700px
    • The subject has to be on the right, with a blank or blurred area on the left. Most of the time, we need to darken and blur the left side of the image to make sure the white text is accessible against the background.
  • Headline:
    • Short title in WordPress
    • Web Team doesn’t update unless James requests
  • Description:
    • Excerpt in WordPress
    • Web Team doesn’t update unless James requests
  • Link:
    • Comes from WordPress automatically


A slideshow displays the stories, with emphasis given to powerful, eye-catching images. Users can click or swipe to see stories from the three previous week. WordPress supplies the photos, text and links dynamically.

Responsive behavior

On large screens, the text and button appear on top of the image. On small screens, the text and button move below the image. The slideshow is always 100% width of the screen, and is touch-enabled.

Desktop view

Features section on a desktop-sized screen

Phone view

Features section on a phone-sized screen