MyUW badge

See the readme on Githubopen_in_new

This page outlines some basic pattern and usage guidance. Following these guidelines helps give your users a consistent experience across apps.

Quick start

Use this section to configure the component, see a live demo, and generate all the code you need to use it on your site. As you interact with the "Customizations" section below, the following live preview will update to match your changes:


Customize your badge

Step one: Set the URL the badge should link to. For example, link to the Wiscard details page in MyUW with the following URL: https://my.wisc.edu/web/apps/details/wiscard-balance . For another example, link to the HR, Payroll, and Benefit News details page in MyUW with https://my.wisconsin.edu/web/apps/details/uw-system-hr-payroll-benefits-news



Step two: Toggle optional customizations


Step three: Generate and copy your custom code

Click the "Generate badge code" button when you have customized the live preview to your liking.


  <!-- myuw-badge component code will appear here -->

Patterns

This badge was designed to improve discoverability of MyUW widgets across other UW-Madison (wisc.edu) (or UW-System, as appropriate) domains.

    Do
  • Use the badge when referring to content that is represented by a widget in MyUW
  • Use the url for a widget's detail page in the url="" attribute
  • Use the dark-theme in non-Madison-specific contexts

    • Don't
  • Link to the MyUW home page
  • Link to a MyUW search results page (unless multiple widgets match the criteria)
  • Use the red theme in non-Madison-specific contexts

How to use

Refer to the readmeopen_in_new for detailed information.


<myuw-badge
  url=""
  dark-theme
  white-border>
</myuw-badge>

Attributes

  • url: Set the URL the badge should link to (e.g. The detail page for a MyUW widget)
  • dark-theme: (optional) If this attribute is present, the badge will use the black theme (red by default)
  • white-border: (optional) If this attribute is present, the badge will have a white border (e.g. when using the badge on a dark background)