Link Styles

Specialized button and link styles

Use these styles created for very specific types of links to give additional meaning to users.

Give button

The maroon button, called: Link: Give Button, is reserved for giving asks: Give, Give now, Make a gift, Donate, etc. This is to establish a consistent look for giving buttons across sites. Use this button when asking people to make a gift online, as it will help draw attention to this important action.

As advised by the University of Minnesota Foundation, we recommend using the maroon button with the wording "Give now" on every giving page and when you have asks on other pages, and link it to as specific a fund as you can. People are more likely to give if the button goes to a specific fund vs. a menu of choices.

For other actions use a non-maroon button option.

Link: Give Button

Examples:

External and same site feature links

On our websites it's important to identify connection points between content. While content may "live" within a particular section in the site organization and navigation, it's important to link to content of interest throughout the site in relevant places.

The external and same site link styles help create emphasis for these content connection points. You don't want to use these styles too heavily, and some sites may not use them at all. You'll want to reserve them for when you want the connection point links to stand out on the page. If you decide to use them on your site, try to incorporate throughout the site to help create meaningful signposts.

These link styles work well when you have longer text to link up vs. a short, directive action (which works best with a button).

Use the same site link for connection points to pages of the site you are on (within the same domain, e.g., for this site that's training.ahc.umn.edu/your-content).
Use the external site link for connection points to content on an entirely separate site (lives under a different domain).

Note that you can't have images overlap with the external and internal link styles.

Link: Feature - External Site

Link: Feature - Same Site

Examples of external style:

Examples of same site style:

Both:

Jump off button

Use when you have a web page with limited content because the majority of the content is on a different site. The purpose of the button is to tell users to visit this separate site for the content of interest. Jump off the site you're on right now to find what you seek!

Link: Jump Off Button

Examples:

The Department of Microbiology and Immunology has several short pages directing users to external sites that house the key content:

These pages for MD students and for residents and fellows were created as placeholders and direct users immediately to other sites, until the content from those external sites is brought into the main Medical School site. Note the color has been altered.

This page on the Office of Education links to the external site for their national center. They needed a page on the office site to explain the center, as it's a key aspect of what they do, but the site itself goes beyond the U and is hosted externally. We did not have the external site style at the time this was created, but it's a perfect candidate for it.

Highlight text

The Link: Highlight Text style can be call out a key action.

It can be used on the same line as regular type, unlike most buttons which should be on a separate line of copy. Link: Highlight Text

Examples:

Medical School:

List: Links

To create a list of links, make an unordered (bulleted) list of links. Highlight the list and apply List: Links, located under the Styles dropdown menu in the WYSIWIG toolbar.

Text sizes

For web accessibility, it's important to use heading styles for their intended purpose: Headings within your copy. Sometimes it can be useful to increase the text of your links, though, for various reasons.

Text Size: Medium

Text Size: Large

Text Size: Extra Large