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
Pathway stories
