Web Pattern Library

The pattern library contains a list of commonly used user-interface design elements that are included within the Purdue templates. This library provides you with examples of usage, code samples and any guidelines pertaining to the components.

We highly recommend that you use the patterns listed below when implementing these element types on your site. If you feel that these patterns don't fit your needs, please contact us at online@purdue.edu or create an issue within the GitHub repository. Let us know your thoughts on any specific elements and explain how they don't fit your situation.


Accordions are used to hide content that is shown only when a visitor chooses to expand the information. Accordions can be used in at least two cases:

  • A way to show/hide content on a page that contains a large amount of information that may or may not be pertinent to each individual user (e.g., a list of frequently asked questions).
  • A list of links beneath multiple headings on a large navigation structure (e.g., a list of stories hidden beneath the categories they belong to).


Buttons are common elements that have two typical use cases:

  • Grabbing the visitor's attention to guide them down a desired path.
  • Acting as a control that changes the current page.


Typography elements are used to add hierarchy and emphasis to content. Some common typographical elements include the following:

  • Headings add visual and semantic hierarchy to your content.
  • Pull quotes highlight important content, setting it apart from the normal text.