U-M LIBRARY
Website Header
The Website Header displays our logo and shows users what U-M Library website that they are using.
PREVIEW
Log in
DEEP BLUE DOCUMENTS
<div>
<m-website-header name="Account">
<a href="/">Log in</a>
</m-website-header>

<m-website-header name="Deep Blue Documents" variant="dark">
</m-website-header>
</div>

Properties
ATTRIBUTETYPEDEFAULTDESCRIPTION
namestringThe user-friendly name of the U-M Library website that uses this Header.
tostring"/"The URL linked to when you click the website name.
variantstringOptionally set to dark for a blue background.
When to use this component
If your website is hosted on lib.umich.edu.
When not to use this component
If your website requires a more complicated U-M website header then you may need to work with the Design System team or build your own.
Used by
Design System
If you found a mistake on this page, would you kindly submit a fix?
Get started
You can start using the Web Components and design tokens immediately by adding this stylesheet and these script tags to the <head>:
<link href​=​"​https://unpkg.com/@umich-lib/css@v1/dist/umich-lib.css​" rel="stylesheet"/>
<script type="module" src​=​"​https://unpkg.com/@umich-lib/components@v1/dist/umich-lib/umich-lib.esm.js​"​>​</​script​>
<script nomodule src​=​"​https://unpkg.com/@umich-lib/components@v1/dist/umich-lib/umich-lib.js​"​>​</​script​>

Use this design system across any framework or no framework at all. We accomplish this by using standardized web platform APIs. We love HTML, CSS, and JavaScript.
UNIVERSITY OF MICHIGAN LIBRARY
913 S. University Avenue
Ann Arbor, MI 48109
WEB COMPONENTS
Chat
Universal Header
Website Header
RESOURCES
Design tokens
Updates
Support
Accessibility
© 2020, Regents of the University of Michigan
Built with the U-M Library Design System, Eleventy, and Github.
WelcomeChatUniversal HeaderWebsite HeaderDesign tokensSupportUpdates