UI COM Style Guide
  • UI COM Style Guide
  • Contact Us
  • Writing for the Web
    • Know Your Audience
    • Reduce Content
    • Make Content Accessible and Easy to Read
      • Write in Plain Language
      • Write Content That is Design Agnostic
      • Structure Your Content
        • Use Headings Correctly
        • Formatting Lists
      • Images and Videos
        • Sizing Images
        • Follow Alt Text Best Practices
        • Videos
      • Avoid PDFs
      • Make User Friendly Forms
      • Make User Friendly Links and Buttons
        • Write Quality Link Text
        • Linking a Phone number or Email
        • Links to External Sites
    • Make Content Findable
    • Writing for the Web Tools
  • College of Medicine Logos, Brand & Style
    • Write with the College Web Style
      • Voice and Tone
      • Terminology and Language
        • UI COM Name Usage
        • Names and titles
        • Departments
        • Degrees and programs
        • Academic year and fiscal year
        • Alumni
        • Abbreviations and acronyms
        • Other Terminology
        • Inclusive language
      • Capitalization
      • Phone & Fax Number Formatting
      • Time and Dates
      • Address & Building Numbers Formatting
      • Profiles
    • Color Palette
    • Typography
    • Logo Guidelines
  • Info for the Chicago Campus
    • Chicago Campus Name Usage
    • Chicago Department Names
    • Chicago Administrative Offices/Personnel Titles
    • UI Health
    • Homepage Guidelines
    • Creating a New Website
  • Info for the Peoria Campus
    • Peoria Campus Name Usage
    • Peoria Department Names
    • Peoria Administrative Offices/Personnel Titles
    • Peoria Terminology
  • Info for the Rockford Campus
    • Rockford Campus Name Usage
    • Rockford Department Names
    • Rockford Administrative Offices/Personnel Titles
    • Rockford Terminology
    • Affiliations
Powered by GitBook
On this page
  • Using RED components
  • Adding Phone and Email Links in a Text block
  • More Information About Phone Numbers
  1. Writing for the Web
  2. Make Content Accessible and Easy to Read
  3. Make User Friendly Links and Buttons

Linking a Phone number or Email

Because many people are accessing our websites on mobile devices, it is important to make phone numbers and emails clickable links whenever possible.

PreviousWrite Quality Link TextNextLinks to External Sites

Last updated 1 year ago

Using RED components

Several components in the RED platform allow you to include phone and email links. These components include the call to action and highlight contact components.

If you are trying to provide contact info for an internal employee, you can also create a profile for them and feature that profile on your page, using the highlight directory component.

  • Call to action

  • Highlight contact

  • Highlight directory

Adding Phone and Email Links in a Text block

  • You can add an email in a text block by pasting the URL like this: "mailto:example@email.com". If you add just 'example@email.com' without the 'mailto:' the browser will consider it as a page and lead to a Page not Found. eg: <a href="mailto:example@email.com">example@email.com</a> will result in

  • You can add a telephone link to a text block by pasting the url like this: "tel:3333333333". Do not add dashes, brackets or anything else. eg: <a href="tel:3333333333">(333) 333-3333</a> will result in

More Information About Phone Numbers

Make sure to follow the correct phone number formatting conventions.

example@email.com
(333) 333-3333
Phone & Fax Number Formatting