University of Miami Visual Identity: Web Style Guide
Body Styles and Examples
This section of the site contains approved University of Miami styles for developing University Web page content. It has been prepared to assist Web developers with an intermediate knowledge of HTML, javascript, and CSS to create content that reflects the identity and branding efforts being employed across the entire University. The CSS materials below can be used for Web pages that are constructed outside of the University's content management system (CMS).
UM's Content Management Service
Faculty and staff who are responsible for developing or managing UM Web pages and sites are invited to consider obtaining a UM Web site account via the University's central Web site content management service, which allows individuals with little or no HTML experience the opportunity to build and manage standard Web pages using simple Web-based tools. The University's CMS employs styles that match the listings below but require no technical expertise in order to implement the styles correctly.
The following style information is ideal for those who are more technically advanced and who wish to incorporate standard and approved design elements into future designs for their college, school, or administrative unit outside of the University's CMS service. In either case, those who are developing new sites or Web applications and have questions about material not covered below are invited to e-mail umidentity@miami.edu. A fully commented, CSS-coded document containing the styles below may be obtained by e-mailing umidentity@miami.edu.
Some University Body Content Styles
I. Headers
Header Style 1 <h1>
Header Style 1 and Header Style 2 are interchangeable options for standard body-level content headers. Header Style 1 is preferred for most uses, since the standard link color on pages is orange.
Header Style 2 <h2>
Nullam faucibus semper libero, a consectetur lorem vehicula eget. Maecenas enim metus, blandit nec vestibulum vel, tempus at nibh. Nullam varius, velit sed bibendum ullamcorper, risus urna lobortis quam, eget dignissim nisl enim a sem. Ut volutpat rhoncus aliquam. Donec ac lacus a ligula consectetur ultrices in volutpat nisl.
Header Style 3 <h3>
Use the style "related" to style links below the Related links header
Header Style 4 <h4>
Header Style 4 and 5 can be used to provide added emphasis in cases where there is a large amount of text or images on a page. It should not be used to replace Header 1 or 2, but rather as an emphasis header further down in page content. This header should never appear at the top of a page.
Header Style 5 <h5>
Header Style 4 and 5 can be used to provide added emphasis in cases where there is a large amount of text or images on a page. It should not be used to replace Header 1 or 2, but rather as an emphasis header further down in page content. This header should never appear at the top of a page.
Reverse Contrast Header <h6>
For items on pages that have less contrast, this header punches the header out.
Header Style 7 can be used to provide added emphasis in cases where there is a large amount of text or images on a page. It is used as a header on the homepage's Feature Story Area.
Header Style 8 <h8>
Header Style 8 can be used to provide added emphasis in cases where there is a large amount of text or images on a page as an alternative to Header Style 7.
Simple Bolded Body Text Headers Are Also Acceptable
For items that require minimal escalation, or which are subheadings of an <h> header, simply bolding body text and making it a header for content is acceptable. This is the preferred style for secondary headers.
II. In-Page Body Elements
An Example of Bulleted Text
Bulleted text will appear on the page as discs.
- Bulleted Item One
- Bulleted Item Two
An Example of a Table with Horizontal Rules Above Each Row
Take advantage of the style for creating a nicely designed table that can help keep table content clearly organized and displayed. Apply the appropriate style to the <td> tag of your table. <td class="table_cell_focus"> will create the header cell style, <td class="table_cell_normal"> will create the regular content cell.
| Table Focus Style | Table Cell Normal Style. This style draws the horizontal rule below the cell secures and supports the technology resources that enable achievements and leadership in academics, research, and clinical care. |
| Real Estate and Facilities | This area is responsible for all on- and off-campus commercial real estate management and gifts related to real estate. |
An Inset Box with Call-out Text
You can use the following area to depict call-out text or when identifying special copy.
Simply type your body text, then use the .inset-box style.
A Link Farm List of Items: Two-Wide
You can use the following area to depict a list of items. The list will apear two items-wide. Create your list of items using a paragraph break between each item, then apply the .itemBox style.
List 2
List 3
List 5
III. Body Text with Images
To develop tables with left- or right-aligned images, set the table padding and spacing to 5 pixels and align the table to the right or left to get the image to appear as it does next to the following paragraph.
 |
| Caption: The "caption" style can be used to address the look of captions that appear below photos. Bold lead-ins, if one is required. (Photo credit: Only if needed.) |
Morbi semper odio id mi elementum in ultrices metus pretium. Duis rutrum mauris nec erat cursus consectetur. Nam congue felis non leo fermentum eget fermentum odio suscipit. Aliquam neque elit, porttitor at faucibus eu, imperdiet non neque. Fusce porttitor tortor nec urna congue congue. Nunc massa felis, suscipit iaculis pellentesque ut, ultrices sit amet diam. In hac habitasse platea dictumst.
Ut quam leo, facilisis id luctus vitae, dignissim non nibh. Curabitur ultricies tellus in libero porttitor eu mollis lacus laoreet. Aliquam tristique, mi sed accumsan cursus, diam libero tristique justo, eget malesuada quam nibh vitae tellus. Praesent vel lacus lorem, ut luctus nisi. Donec vitae neque non urna ornare rutrum. Vestibulum interdum varius venenatis. Donec dignissim aliquam arcu, nec lacinia ipsum vehicula ac. Etiam odio justo, faucibus at pellentesque in, semper ut diam. In dapibus, ante tristique cursus fringilla, metus nulla lacinia nisi, id aliquam tellus mauris non diam. Sed est eros, mattis vel posuere in, semper vitae velit.
Ut quam leo, facilisis id luctus vitae, dignissim non nibh. Curabitur ultricies tellus in libero porttitor eu mollis lacus laoreet. Aliquam tristique, mi sed accumsan cursus, diam libero tristique justo, eget malesuada quam nibh vitae tellus. Praesent vel lacus lorem, ut luctus nisi. Donec vitae neque non urna ornare rutrum. Vestibulum interdum varius venenatis. Donec dignissim aliquam arcu, nec lacinia ipsum vehicula ac. Etiam odio justo, faucibus at pellentesque in, semper ut diam. In dapibus, ante tristique cursus fringilla, metus nulla lacinia nisi, id aliquam tellus mauris non diam. Sed est eros, mattis vel posuere in, semper vitae velit.