Web Services

Styles

Each template features a set of styles that can be applied to your content.  Using the appropriate styles will ensure a consistent look and feel across the URMC site. This section will outline best practices for applying styles to your content.

Link Styles

The following table shows the available styles and summarizes their uses.

Style Name Appearance Usage Notes
link-audio Listen to audio Use when linking to an audio file.
link-email email@urmc.rochester.edu Use when linking email addresses.
link-external Link to ExternalDomain.org Use when linking to websites not on the URMC servers.
link-file File Use when linking generic files.
link-lab Lab Website Use when linking a research lab website.
link-news News Story Use when linking to a press release or news story.
link-pdf PDF Use when linking PDF files.
link-pdf-secure Secure PDF Use when linking PDF files on a secure or password protected site.
link-ppt PowerPoint Slide Show Use when linking PowerPoint files.
link-print Print Document Use when linking to a printable document.
link-profile Faculty Profile Use when linking to eCV profiles.
link-pubmed PubMed Article Use when linking to PubMed Articles.
link-rss Subscribe to news feeds Use when linking to news feed sign up.
link-secure Secure Website Use when linking to a secure or password protected site.
link-slideshow Slideshow Use when linking to a gallery or slideshow.
link-video Video Use when linking video files.
link-video-secure Secure Video Use when linking video files on a secure or password protected site.
link-word Word Document Use when linking Word files.
link-xls Excel File Use when linking Excel files.
link-zip Zip File Use when linking compressed (.zip, .rar, etc) files.

Lists

Lists should be used when appropriate.

Unordered and Ordered Lists

Unordered lists are synonymous with bulleted lists, and should be used whenever the items are to be presented in no particular order. They appear as shown:

  • First bullet item.
  • Second bullet item.
  • Third bullet item.
  • Fourth bullet item.

Ordered or numbered lists should be used when presenting items that follow a particular order, such as instructions or directions. They appear as shown:

  1. First do this.
  2. Then do this.
  3. Now do this.
  4. Finally do this.

Aligned Lists

Use these styles to align a list to the left, right or to create two side-by-side lists.

  • list-left
  • list-left
  • list-left

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

  • list-right
  • list-right
  • list-right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

  • list-left
  • list-left
  • list-left
  • list-right
  • list-right
  • list-right

 

Compact Lists

Use this style to close up line spacing between list items.

  • First item
  • Second item
  • Third item

Paragraph Styles

Using paragraph styles is a good way to group related text or add interest to your page. They will affect a block of text, causing it to appear on its own line, as opposed to inline in the middle of a sentence. The style options for paragraphs are illustrated below.

box-callout

My important text to highlight

Use to bring out any important information relating to the content on the page, such as a statistic or a testimonial.

box-notice

Alert: This is an example of a box notice. If this had been an actual box notice, you would have been instructed what to do.

Use to highlight important instructions or alerts.

box-directory

A | B | C | D ...

Use to present an alphabetical list of links to other elements within the same page. (See the Departments and Centers page for a live example.)

Text Styles

Text styles are styles that can be applied inline; that is, they can be used within a sentence without breaking the paragraph to start a new line. Text styles you'll find useful include:

Style Name Appearance Usage Notes
text-bold-caps Sample text using text-bold-caps Use for uppercase bold lettering.
text-small Sample text using text-small Use for text that is 80% smaller than the default font.
text-large Sample text using text-large Use for text that is 118% larger than the default font.
text-xl Sample text using text-xl Use for text that is 145% larger than the default font.
text-xl-fancy Sample text using text-xl Use for text that is 145% larger, serif, and italic.

Images

imgFrameLeft

Entrance to School of Medicine

There are several options available for styling images. You can "float" an image to the right or left, with text wrapping around them, either with or without a border. The image to the left is using the style "imgFrameLeft." The image is aligned to the left while the text wraps around to its right. A light gray border and padding are also applied automatically with this style.

imgFrameRight

Nurse checking on patient's monitor By contrast, the image to the right is using the style "imgFrameRight." The image is floated to the right while text wraps around its left side. Note that to get this paragraph to not wrap around the image above, we applied a style called "clear" to the paragraph, which in effect turns off any preceding alignment.

imgFrame

Nurse checking on patient's monitor

The image above uses a style that has no float applied to it. This is what you want to use if the image you are using is not associated with a paragraph of text, but you still want the frame around it. Depending on where you apply this style to an image, it will depend whether it aligns left, right, or center.

Other Media

media-left

Need to include a youtube video on your site? Similar to the image styles, the media styles allow for embedded or iframed elements to be floated left or right with the appropriate amount of padding for text. The amount of padding on the media classes is double that of the image classes as they do not have a border w/ margin applied.

 

 

media-right

This is the media-right class. It has the same amount of padding as media-left but is floated to the right.

Contact Us

Web Services
211 Bailey Road
West Henrietta, NY 14586

CVRI Shuttle Schedule

Need Help?

File a ticket through the Web Services Ticketing System.