Website Header

Experimental

The Website Header displays our logo and shows users what U-M Library website that they are using.

Preview

HTML

<m-website-header name="Example">
<a href="/">Log in</a>
</m-website-header>

Properties

Attribute Type Default Description
name string The user-friendly name of the U-M Library website that uses this Header.
to string "/" The URL linked to when you click the website name.

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

If you found a mistake on this page, would you kindly submit a fix on GitHub?

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.