Skip to Main Content

Gleeson Library Design System

Administration, layout, components, and content guide for the Gleeson Library website.

Alerts

Alerts are used to communicate significant and/or timely updates.

Examples

Alerts — Global Banner

Example

Labor Day
The library will be closed Monday, September [DATE] in observance of Labor Day. See all library hours.

Alerts — In-Page Banner

Example

Service Update
Copying, printing, and scanning services are only available to current students, staff, and faculty.

Usage

  • Platforms — Alerts can be used in LibGuides LibAnswers LibCal
  • Permission level — Permissions depend on the type of alert:
    • Global Banner Alerts can be used by Admin users
    • In-Page Banner Alerts can be used by Regular and Admin users
  • Framework — Alerts are built on the Bootstrap 3 Alerts component

Content Guidelines

  • Brevity — Keep alert content brief and focused
  • Clarity — Alert titles, text, and links should be descriptive and meaningful
  • Actionable — If the alert requires action or more information, provide a clear next step, solution, or link

Best Practices

  • Colors — Alerts can be lime orange turquoise olive red blue
  • Placement — Placement depends on the type of alert
    • Global Banner Alerts — Above the header
    • In-Page Banner Alerts — Below the title of the page
  • Global banner alerts — Used to communicate significant changes to library services to patrons
    • Building closures (unexpected & expected)
    • Major systems outages (unexpected outages & scheduled maintenance on Fusion, OpenAthens, Ignacio, etc.)
    • Other significant service changes (mask mandates, disruptive construction, etc.)

  • In-Page Banner Alerts — Used to communicate low-impact changes to a specific library service

Instructions

1. Draft Your Alert

  1. Copy — The HTML in the Source code box below is the template for all banner alerts on the website. Copy this code and paste it in your editor.
    • Source code 
      <!-- BEGIN alert -->
    <div class="alert turquoise library-alert">
        <div class="container library-alert">
            <div class="alert-title"><i class="fa-solid fa-circle-info"></i> Short Alert Title</div>
            <div class="alert-message">Short description of alert. <a href="https://library.usfca.edu">Optional link to more information.</a></div>
        </div>
    </div>
<!-- END alert -->
    • Output
      Short Alert Title
      Short description of alert. Optional link to more information.
    • More information about editing HTML — Standard PC and Mac text editor software can be used to edit HTML. Learn about HTML editors.
  2. Edit — The highlighted text should be updated and customized to reflect the current conditions. All other text must not be edited.
    • Keep in mind — Banner alerts should be concise, clear, and current.
      • Patrons should be able to quickly understand what is being communicated and how they might be impacted. Use the optional link to point patrons to more information.
      • See also: Examples of Common Banner Alerts

2. Test Your Alert

Always test an alert in the Staging group of LibGuides before publishing it on the live site.

  1. Go to the Staging group (see below for specific directions)
    • Log into LibGuides https://usfca.libapps.com/libguides/
    • From the drop-down menu at the top of the page, select  Admin > Groups
    • Find the Staging group, then click the Edit Group icon under the Actions column
  2. Go to the Header / Footer / Tabs / Boxes tab > Group Header panel
    • Check the Exclude System Level Header box
    • Select the Display this HTML radio button
  3. Paste the drafted banner alert at the very top of the text area — above the <header> tag — and click Save HTML
  4. Click View Group Homepage to check that the banner alert is displaying correctly and is free of grammatical errors
    • The background color of the banner alert should span the entire width of your browser screen
    • The text of the banner alert should align with the same margins as the content below
    • If the banner alert is not displaying correctly, double-check that you copied the template code correctly and did not accidentally edit any part of the HTML that must not be edited.

3. Publish Your Alert

Banner alerts should be posted in the header of these three systems:

Examples

Building Closures

Post the alert 3 days before the closure.

What It Looks Like

Martin Luther King, Jr. Day
The library will be closed Monday, January [DATE] in observance of Martin Luther King, Jr. Day. See all library hours.
 

Source Code


<!-- BEGIN alert -->
    <div class="alert turquoise library-alert">
        <div class="container library-alert">
            <div class="alert-title"><i class="fa-solid fa-circle-info"></i> Martin Luther King, Jr. Day</div>
            <div class="alert-message">The library will be closed Monday, January [DATE] in observance of Martin Luther King, Jr. Day. <a href="https://libcal.usfca.edu/hours">See all library hours.</a></div>
        </div>
    </div>
<!-- END alert -->

What It Looks Like

President's Day
The library will be closed Monday, February [DATE] in observance of President's Day. See all library hours.
 

Source Code


<!-- BEGIN alert -->
    <div class="alert orange library-alert">
        <div class="container library-alert">
            <div class="alert-title"><i class="fa-solid fa-circle-info"></i> President's Day</div>
            <div class="alert-message">The library will be closed Monday, February [DATE] in observance of President's Day. <a href="https://libcal.usfca.edu/hours">See all library hours.</a></div>
        </div>
    </div>
<!-- END alert -->

Easter Holiday

Easter Holiday
The library will close at 4pm on Thursday, [MONTH] [DATE] and will be closed Friday through Sunday, [MONTH] [DATE] – [MONTH] [DATE], in observance of Easter. See all library hours.
 

Source code


<!-- BEGIN alert -->
    <div class="alert blue library-alert">
        <div class="container library-alert">
            <div class="alert-title"><i class="fa-solid fa-circle-info"></i> Easter Holiday</div>
            <div class="alert-message">The library will close at 4pm on Thursday, [MONTH] [DATE] and will be closed Friday through Sunday, [MONTH] [DATE] – [MONTH] [DATE], in observance of Easter. <a href="https://libcal.usfca.edu/hours">See all library hours.</a></div>
        </div>
    </div>
<!-- END alert -->

What It Looks Like

Memorial Day
The library will be closed Monday, May [DATE] in observance of Memorial Day. See all library hours.
 

Source Code


<!-- BEGIN alert -->
    <div class="alert olive library-alert">
        <div class="container library-alert">
            <div class="alert-title"><i class="fa-solid fa-circle-info"></i> Memorial Day</div>
            <div class="alert-message">The library will be closed Monday, May [DATE] in observance of Memorial Day. <a href="https://libcal.usfca.edu/hours">See all library hours.</a></div>
        </div>
    </div>
<!-- END alert -->

What It Looks Like

Juneteenth
The library will be closed on [DAY], June [DATE] in observance of Juneteenth. Gleeson Library encourages all individuals in the USF community to use this day to reflect on and actively engage in anti-racism work.
 

Source code


<!-- BEGIN alert -->
    <div class="alert orange library-alert">
        <div class="container library-alert">
            <div class="alert-title"><i class="fa-solid fa-circle-info"></i> Juneteenth</div>
            <div class="alert-message">The library will be closed on [DAY], June [DATE] in observance of Juneteenth. Gleeson Library encourages all individuals in the USF community to use this day to <a href="https://library.usfca.edu/blacklivesmatter">reflect on and actively engage in anti-racism work</a>.</div>
        </div>
    </div>
<!-- END alert -->

What It Looks Like

Independence Day
The library will be closed [DAY], July [DATE] in observance of Independence Day. See all library hours.
 

Source code


<!-- BEGIN alert -->
    <div class="alert turquoise library-alert">
        <div class="container library-alert">
            <div class="alert-title"><i class="fa-solid fa-circle-info"></i> Independence Day</div>
            <div class="alert-message">The library will be closed [DAY], July [DATE] in observance of Independence Day. <a href="https://libcal.usfca.edu/hours">See all library hours.</a></div>
        </div>
    </div>
<!-- END alert -->

What It Looks Like

Labor Day
The library will be closed Monday, September [DATE] in observance of Labor Day. See all library hours.
 

Source code


<!-- BEGIN alert -->
    <div class="alert orange library-alert">
        <div class="container library-alert">
            <div class="alert-title"><i class="fa-solid fa-circle-info"></i> Labor Day</div>
            <div class="alert-message">The library will be closed Monday, September [DATE] in observance of Labor Day. <a href="https://libcal.usfca.edu/hours">See all library hours.</a></div>
        </div>
    </div>
<!-- END alert -->

What It Looks Like

Thanksgiving Holiday
The library will be closed on Thursday & Friday, Nov. [DATE] & [DATE] for Thanksgiving. See all library hours.
 

Source code


<!-- BEGIN alert -->
    <div class="alert olive library-alert">
        <div class="container library-alert">
            <div class="alert-title"><i class="fa-solid fa-circle-info"></i> Thanksgiving Holiday</div>
            <div class="alert-message">The library will be closed on Thursday & Friday, Nov. [DATE] & [DATE] for Thanksgiving. <a href="https://libcal.usfca.edu/hours">See all library hours.</a></div>
        </div>
    </div>
<!-- END alert -->

What It Looks Like

Winter Holiday Break
The library will be closed [DAY], Dec. [DATE] through [DAY], Jan. [DATE] for the Winter Holiday Break. See all library hours.
 

Source code


<!-- BEGIN alert -->
    <div class="alert blue library-alert">
        <div class="container library-alert">
            <div class="alert-title"><i class="fa-solid fa-circle-info"></i> Winter Holiday Break</div>
            <div class="alert-message">The library will be closed [DAY], Dec. [DATE] through [DAY], Jan. [DATE] for the Winter Holiday Break. <a href="https://libcal.usfca.edu/hours">See all library hours.</a></div>
        </div>
    </div>
<!-- END alert -->

Major System Outages

  • Unexpected Outage
  • Scheduled Maintenance

What It Looks Like

Ignacio Scheduled Maintenance
Ignacio: USF Libraries Catalog will be unavailable Thursday, July 20, 1:30AM – 6:30AM while critical work is performed on the system.
 

Source Code


<!-- BEGIN alert -->
    <div class="alert olive library-alert">
        <div class="container library-alert">
            <div class="alert-title"><i class="fa-solid fa-circle-info"></i> Ignacio Scheduled Maintenance</div>
            <div class="alert-message">Ignacio: USF Libraries Catalog will be unavailable Thursday, July 20, 1:30AM – 6:30AM while critical work is performed on the system.</div>
        </div>
    </div>
<!-- END alert -->
University of San Francisco Logo

2130 Fulton Street
San Francisco, CA 94117-1080
415-422-5555

Follow Us

Copyright © 2025 University of San Francisco