Events

We use this section to highlight events that are pertinent to a college-wide audience.  We rotate through events from all campuses, and about a variety of topics. Each item points to its listing in the PCC event calendar or event page.

Guidelines

  • Events are not:
    • Limited to a specific audience
    • For events that aren’t open to the public
    • Events with a prolonged duration, like an entire term

Development info

  • Stylesheet location: /source-v6/styles/applications/_home.scss
  • The Web Team adds events to the page manually.
  • Choose events that are at least a week in the future so we don’t have to update the section mid-week
  • Titles should preferably fit on one line – include the campus as part of the title (e.g. SE – Event Title), or leave off the location if there are multiple
  • If the event runs for more than one day, include the full span (e.g. April 12-14)
  • Two events:
    <h4>Events</h4>
    <ul data-equalizer>
      <li><a href="" target="_blank">
        <div data-equalizer-watch class="item">
          Campus abbreviation – Title <br>
          <span>Month day</span>
        </div>
      </a></li>
      <li>(repeat)</li>
    </ul>
    <a class="more" href="/about/calendars/>more events...</a>
  • One event:
    <h4>Events</h4>
    <ul>
      <li class="full"><a href="" target="_blank">
        <div class="item">
          Campus abbreviation – Title <br>
          <span>Month day</span>
        </div>
      </a></li>
    </ul>
    <a class="more" href="/about/calendars/>more events...</a>

Styling

There can be one or two events, or we can remove the section if there are no events to show. A “more events” link directs readers to the PCC event calendar. Each event includes the abbreviated campus location (or no location if it’s at multiple campuses), a short title, and the event date. We don’t include the time.

Responsive behavior

The items display in two columns on large screens, and stack into a single column on small screens.

Desktop view

Events

Phone view

Events on a small screen

One event

One full-width event

Full section

Full news, events and announcements section