Reusable Designs

Badges

Visually display static information about a specific item or within a table.

Banners

Grab the user’s attention and display important information across the full-width of a site.

Breadcrumbs

An important navigational element for deep sites with clear hierarchy to show users where they are.

Buttons

Communicate actions users can take using a click, tap, or keypress.

Chat

Provide persistent access to Ask a Librarian chat throughout a site.

Checkbox

An input control for choosing multiple options from a list or toggle between two options.

File Upload

An input control for uploading one or more files.

Input Fields

Input controls for interactive fields (text, numerical, date, time, phone number) commonly used in forms.

Link

Indicate that there is more information elsewhere that users can navigate to.

Radio Button

An input control for short lists of options that display directly on the page and allow a single choice.

Range

An input control for selecting a numeric value from a given range using a slider.

Search Input

Allow users to search content of a site through a form submit.

Select

An input control for longer lists of options or form submissions.

Skip Link

Visually hidden links that allow quick navigation to main content via keyboard focus.

Tables

Display matrix style relationships or collections of data using rows and columns.

Tags

Allow navigation or filtering by selecting keyword-based categories.

Universal Header

Shows users they’re on a U-M Library website and provides a path to other sites.

Website Footer

Display contact information and helpful links at the bottom of a website.

Website Header

Display contact information and helpful links at the bottom of a website.