Homepage announcements

Web services

Homepage announcements

Announcements are a place for timely information that needs to stay on the page for a longer amount of time, or information that is targeted at a public audience (student-focused information goes in the spotlights).

Guidelines

There can be one or two announcements, and they go above the news when present (below the buttons). View a list of common announcement messages (adapt them from the spotlight messages).

Announcements, like spotlights, shouldn’t be used for program- or department-specific messages, only for messages relevant to all students and the general public. Unlike spotlights, announcements can display non-student-focused messages, like budget announcements. They should also be used for longer-term messages, such as “sign up for closure alerts”, which is displayed all winter.

Styling

Announcements are green and have a heading and description. They link to a page with supporting information and can have an optional image or icon. There are two options: one full-width announcement or two half-width announcements. They use the same shadow treatment as homepage callouts.

Announcements can include a thumbnail image or Font Awesome icon if desired. Include it before the heading and call to action so that it shows up on the left side of the announcement.

Responsive behavior

The items display in two columns on large screens and stack into a single column on small screens (if there are two announcements).

Development info

Stylesheet location: /_source/styles/homepage/_news-events.scss
Announcements are hard-coded on the page, and use the medium-12 columns classes for one full-width announcement and the medium-6 columns classes for two half-width announcements.

<div id="announcements" class="row" data-equalizer="announcements">
  <h4 class="visually-hide">Announcements</h4>
  <div class="small-12 columns"> <!-- also include medium-6 for half-width announcements -->
    <a href="">
      <div class="announcement" data-equalizer-watch="announcements">
        <img src="" alt="" /> <!-- or Font Awesome icon, both optional -->
        <p><strong>heading</strong> <br><span class="call-to-action">call to action</span></p>
      </div>
    </a>
  </div>
</div>

Portland Community College | Portland, Oregon

Web services