Skip to Main content

Links

Web Style Guide

Links can be added to web pages in order for visitors to navigate to things like other web pages, documents, and external websites.

To add or edit a link, select some text, and click the chainlink icon in the toolbar.

When adding links, special considerations should be made to ensure good user experience and accessibility.

  • Use Descriptive Link Text - the text should clearly describe the content it leads to. Never use vague phrases like “click here…”. These can be confusing to users with assistive technology.
  • Do Not Hyperlink URLs - write link text that describes the destination, not the URL of the destination.
  • External Links Should Open in New Windows - when linking to pages outside of www.angelo.edu, choose the “open link in new window” option when creating the link.

Link Styles

By default, links, such as this link to the Web Style Guide homepage, are styled in a bold font with a dark blue color and light blue underline.

Other styles are available for links, depending on their purpose, context, and destination. These styles can be selected when creating a link or later by choosing the appropriate option in the Formats dropdown.

File Type Links

When linking to documents, such as PDFs and Word Docs, choose the appropriate style to add an icon to the link that indicates visually what type of link it is:

Styled Links

Yellow Button links are used to call attention to links that represent the primary action a user should take, for example a “Register Now” link that takes users to a registration form. Yellow Buttons should be used sparingly, usually no more than once on a single page.

Example Yellow Button Link

Call to Action links are used to call attention to one or more links that need to stand out more than a default link. These links are styled in all caps with a forward-facing arrow that changes to a ram hand icon when users hover over them. Unlike Yellow Buttons, Call to Action links can be used more than once a page, often in a list of links like in the Quick Links Block.

Example Call to Action Link

Yellow Buttons and Call to Action links should only be applied to links that stand on their own line, never to links inside a paragraph.