MyUW Web Components

Get a tour of the site
Try MyUW White theme

Our mission: This small library of web components was created to provide developers across the UW-Madison campus with an easy-to-use, framework agnostic collection of elements that closely follows the design specifications of our university's User Experience experts.

Interactive Demos

Each entry in the table below has information about one of our components, the latest versions of which are currently in use on this site.

Component Github link Toggle visibility
Top app bar myuw-app-bar n/a
Navigation drawer myuw-drawer
Notifications new_releases (new 2019) myuw-notifications
Hide notifications
Banner message new_releases (new 2019) myuw-banner
Hide banner message
Search bar myuw-search
Hide search
Profile button myuw-profile
Hide profile
Help and feedback myuw-help
Hide help
MyUW badge new_releases (new 2019) myuw-badge
Exclude badge from code generation

How to use this site

The best way to get the most out of this site is to take a quick tour.

Otherwise, you can follow these basic instructions:

  1. Click a component's name in the table above
  2. Use the dialog that opens to customize the component however you like. Any changes you make will be reflected live on this page.
  3. When you've customized the page to your liking, scroll down to the "Get components" section where you can generate the code for your custom components that you can copy and paste into your own app/web page.
  4. Browse individual component pages (click the hamburger menu) to view usage and pattern guidance before implementing them in your app.

Get components

The markup generated bythis tool will reflect any configuration options you have changed (or left unchanged) while experimenting with the demos.

Please note: The markup generated by this tool includes the latest 1.0+ version of every component by default (the same ones used on the site). You can view the CHANGELOG.md file in each component's repository on Github to keep up to date. Any breaking changes will result in a new major version (i.e. 2.0.0) and require manual updating to use.

  1. Import components and dependencies into your document
    Copy to clipboard 
    2. 
<!-- Script tags to import components will appear here -->
  2. Add component HTML to your page
    Copy to clipboard 
    3. 
<!-- Component HTMl will appear here -->
  3. Copy custom CSS variables
    Copy to clipboard 
    4. 
/*  Custom CSS properties will appear here */
  4. Custom javascript events
    Copy to clipboard

    5. myuw-help: When you know a user has an active session, dispatch the "myuw-login" custom event to tell the profile component that someone is logged in.

    myuw-notifications: When you have organized the notifications you want to display, dispatch the "myuw-has-notifications" custom event.

    
/* Javascript events for selected components */