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 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
- 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
Don't
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)