Reusable Designs: Library Hours

Components for designers and developers building user interfaces.

It can be helpful to include the library's current hours on your webpage. We offer a few ways to embed library hours.

Guidelines for Using Library Hours

Hours should be provided either as a single location or all four main locations. On websites meant to be children of the University Libraries's site, the hours should be included to display in the Web Header.

Embeddable hours only show today's hours for the selected location(s). To direct users to future hours, link them to the library's hours page.

Relevant WCAG Guidelines:

Result

All Locations

Library Hours embedded in the website's header

One Location (Mary Idema Pew)

 Today : 10:00am - 6:00pm

Code

<!--
Docs: https://libguides.gvsu.edu/reusabledesigns/hours
-->
<!-- Show all library hours for today -->
<!-- Include where you want the hours to appear. Must be nested inside the class of .site -->
<div class="site>
...
<div class="col-4 col-sm-12 library-hours"></div>
<!-- Include this script before the closing <body> tag -->
<script src="https://prod.library.gvsu.edu/labs/template_hours/hours.js"></script>
<!-- Show one libraries' hours for today -->
<!-- Include where you want the hours to appear. Use location code for after libhours
maryi - Mary Idema Pew Library
steelcase - Steelcase Library
frey - Frey Foundation Learning Commons
virtual - Virtual Services
seidman - Seidman House
cml - Curriculum Materials Library
-->
<div class="libhours-maryi"></div>
<!-- Include this script before the closing <body> tag
This script modified from UPenn's LibCal Tools: https://github.com/upenn-libraries/LibCal-Tools
-->
<script src="https://prod.library.gvsu.edu/labs/LibCal-Tools/src/js/libhours.js"></script>
view raw libhours.html hosted with ❤ by GitHub

Our design system is deeply indebted to the University of Michigan Libraries' Design System.

  • Last Updated: Oct 11, 2024 11:51 AM
  • URL: https://libguides.gvsu.edu/reusabledesigns