Reusable Designs: Library Hours
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
One Location (Mary Idema Pew)
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> |
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