Announcements

Announcements are the way we share timely, short-lived information with our public audience. They are of interest to a broader audience than is typically targeted by an email or a MyPCC announcement. Examples of announcements include:

  • timely notifications regarding upcoming and planned closures (e.g., Thanksgiving)
  • public awareness notifications (e.g., weather closure or public safety information)
  • see a list of common announcements

Guidelines

  • Announcements are not:
    • a sales tool for individual programs or classes
    • a place to put event information

Development info

  • Stylesheet location: /source-v6/styles/applications/_home.scss
  • The Web Team adds announcements to the page manually.
  • Titles are typically two or three words, and description text is also short and preferably fits on one or two lines.
  • Text does not generally use “PCC” or “Portland Community College” as part of the text. The home page already provides this reference.
  • Optional thumbnail image is 42 pixels by 42 pixels and is created by the Web Team or Marketing and Communications.
  • Two announcements:
    <div id="announcements" class="clearfix">
      <ul data-equalizer>
        <li><a target="_blank" href="">
          <div data-equalizer-watch class="item clearfix">
            Title <br>
            <span>Description</span>
          </div>
        </a></li>
        <li>(repeat)</li>
      </ul>
    </div>
  • One announcement:
    <div id="announcements" class="clearfix">
      <ul>
        <li class="full"><a target="_blank" href="">
          <div class="item clearfix">
            Title <br>
            <span>Description</span>
          </div>
        </a></li>
      </ul>
    </div>
  • Announcement with icon:
    <div id="announcements" class="clearfix">
      <ul>
        <li class="full"><a target="_blank" href="">
          <div class="item clearfix">
            <img src="" class="alignright" alt="">
            Title <br>
            <span>Description</span>
          </div>
        </a></li>
      </ul>
    </div>

Styling

Announcements include a short title and description text. They can include a small thumbnail image displayed to the right of the posting. The title, description and image link to an existing content level page or a news.pcc.edu story for more details.

There can be one or two announcements at any given time, but there usually isn’t an announcement present. They can include an optional icon.

Responsive behavior

There is usually only one announcement at one time, but if there are two they appear side by side on large screens and stack on small screens.

One (with and without icon)

One announcement

Announcement with icon

Two

Two announcements

Full section

Full news, events and announcements section