Links
Linking guidelines
Learn about how to write accessible link text and properly link to external resources in our linking guidelines.
Links are underlined and use a different color so they are easy to see at a glance on the page, and are visible for people who see limited or no color. It’s important to not underline text on the page that isn’t a link – making something look clickable that isn’t is confusing for many people.
Jump to a component:
Basic links
Basic links are used across the website to link to other pages or documents.
Styling
Basic links are teal and underlined.
How to use for Basic links
Use the “insert/edit link” option in the toolbar.
欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Basic links
Stylesheet location:
/_source/styles/base/_typography.scss
- Don’t include links with blank hrefs.
- Make sure all links on prod don’t point to test or dev.
- JavaScript adds
class="current"to any link that points to the current page, and the CSS gives it a different look (less clickable) than a link pointing to another page. This is mostly used in the sidebar.
<a href="">Link text</a>
Example of Basic links
I’m a normal link to another page.
Link type
If a link points to the Intranet, a PDF, or a Word Doc, the link type is added automatically in brackets after the link. Don’t add the link type manually unless it’s for a different type of media, such as a video.
Styling
The link type will display in smaller red text, in brackets, at the end of the link.
How to use for Link type
No action needed.
欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Link type
Stylesheet location:
/_source/styles/base/_typography.scss
Works for PDFs (.pdf), Word (.doc or .docx), Excel (.xls or .xlsx), PowerPoint (.ppt or .pptx), or the PCC Intranet (intranet.pcc.edu).
The following is added automatically:
<em class="link-type" title="Link type">[link type]</em>
Example of Link type
I’m a link that points to a document.
Images as links
Most of the time, images shouldn’t be used as links. Using real text instead is more accessible for many reasons, and prevents your link from disappearing or being difficult to read on smaller screens, slower connections, or if a user has images turned off. In many cases, you can use a button instead.
If linking to a full-sized version of an image, you can make the image a link, but also add a caption that says something like “view the full-size image”.
Feeds and galleries often do have image links, which are in context with the content around them.
Styling
Images that are part of a link look like a regular image, but have reduced opacity when hovered or focused on.
How to use for Images as links
When adding an image, you can choose to make it link using the “Link to:” field. In most cases, use the “Custom URL” option and paste the link into the “URL” field that appears. You can check the box for “Open in a new tab” if desired.
欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Images as links
Stylesheet location:
/_source/styles/base/_typography.scss
<a href=""><img src="" alt="" /></a>
Example of Images as links
Callouts as links
Callouts in a callout gallery can be a link. Learn more about callouts as links.