Website Header

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



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

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


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.
variant string Optionally set to dark for a blue background.

When to use this component

If your website is hosted on

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="" rel="stylesheet"/>
<script type="module" src=""></script>
<script nomodule src=""></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.