Web services

Homepage public notices

Public notices 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 public notices, and they go above the news when present (below the buttons).

Public notices, 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, public notices can display non-student-focused messages, like budget messages. They should also be used for longer-term messages, such as “sign up for closure alerts”, which is displayed all winter.

Styling

Public notices 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 public notice or two half-width public notices. They use the same shadow treatment as homepage callouts.

Public notices 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 public notice.

Responsive behavior

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

Development info
  • Stylesheet location: /_source/styles/homepage/_news-events.scss
  • Public notices are hard-coded on the page, and use the medium-12 columns classes for one full-width public notice and the medium-6 columns classes for two half-width public notices.
  • <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>

Homepage public notice examples

Desktop view

Two homepage announcements side by side

Phone view

Two homepage announcements stacked vertically