Gleeson Library Design System

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
    • Expected — Publish banner 3 days ahead of closure
    • Unexpected — Publish banner as soon as possible
  • Major systems outages (unexpected outages & scheduled maintenance on Fusion, OpenAthens, Ignacio, etc.)
    • Unexpected outage — Publish banner as soon as possible
    • Scheduled maintenance — Publish banner 3 days ahead of maintenance
  • 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 four places:

• LibGuides — Legacy
• LibGuides — New
• LibAnswers
• LibCal