Website Header

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

Preview

HTML

<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

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 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/web@1/umich-lib.css" rel="stylesheet"/>
<script type="module" src="https://unpkg.com/@umich-lib/web@1/dist/umich-lib/umich-lib.esm.js"></script>
<script nomodule src="https://unpkg.com/@umich-lib/web@1/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.