Portland Community College | Portland, Oregon Portland Community College

Homepage news

The news section of the homepage highlights content from the PCC news website. These stories provide a glimpse into the diverse activities and happenings taking place at PCC, and show our involvement in the community. The goal is to show students that they belong and to provide a way to learn more about PCC and its people. News items are listed in the “what’s happening around PCC” section, between announcements and events (if present), and in each of the pathway modals.

Guidelines

The Homepage Committee and James Hill determine what news stories should appear on the homepage.

Required news items:

  • One main feature story (can be any topic).
  • One student-focused feature story.
  • One faculty- or staff-focused feature story.
  • Six title-only stories.
  • One pathway-focused story for each of the pathways.

Styling

The news section includes three main feature story boxes: one larger box that has a general audience, one smaller box that features a student or students, and one smaller box that features a faculty or staff member or members. Six other stories are included as text links, located below the student and staff stories.

The three featured news stories look identical to homepage callouts but the main featured story includes the excerpt between the title and call to action. The student and faculty/staff featured stories have a little tag in the upper left corner labeling them. The pathway stories resemble facts.

Responsive behavior

No change except that columns stack vertically on small screens.

Development info
  • Stylesheet location: /_source/styles/homepage/_news-events.scss
  • News items come from WordPress automatically – James Hill marks which stories should appear.
  • Featured stories:
    <div class="small-12 medium-6 columns" id="news-featured"> <!-- or "news-student" or "news-faculty" -->
      <a href="">
        <div class="card">
          <span class="tag"></span> <!-- student or faculty and staff -->
          <div class="card-image">
            <img src="/_source-v6/images/missing-image.png" alt="" />
          </div>
          <div class="card-details">
            <h5 class="card-heading">Loading...</h5>
            <p></p> <!-- main featured story only -->
            <p class="call-to-action">Read the story</p>
          </div>
        </div>
      </a>
    </div>
  • List of stories:
    <div class="row" id="news-other">
      <h5 class="subheading">Stories from around the college</h5>
      <div class="small-12 medium-6 columns">
        <ul class="no-bullets"><li>Loading...</li></ul>
      </div>
      <div class="small-12 medium-6 columns">
        <ul class="no-bullets"><li>Loading...</li></ul>
      </div>
    </div>

Homepage news examples

Featured stories and list

Featured story boxes and list of other stories

Pathway stories

Pathway story