Style Guide - documentation.its

Typography

documentation.ITS uses typography to create hierarchies of content and to promote readability. Roboto is the default font for headers and body copy.

Header Type

Information and Technology Services

Information and Technology Services

Information and Technology Services

Copy Type

Information and Technology Services provides technology and communications services in support of U-M Ann Arbor's academic and research needs. ITS also manages the administrative computing systems and executes the IT security strategy for the Ann Arbor campus, the U-M Health System, and the two regional campuses (Flint and Dearborn).

Lists

Unordered

For list of items in which the order does not explicitly matter.

  • Information
  • Technology
  • Services

Nested Unordered

For nested list of items in which the order does not explicitly matter.

  • Information
    • Administrative
  • Technology
    • Services
  • Services
    • Building

Ordered

For list of items in which the order does explicitly matter.

  1. Information
  2. Technology
  3. Services

Labels

Default Primary Success Info Warning Danger

Links within the body copy are distinguished by their blue color and are underlined.

Information and Technology Services

The in-page navigation menu, or table of content, is auto-generated in the sidebar from h2 and h3 tags with id attribute and value.

First Level

Information and Technology Services

Second Level

Administrative Services Building

Responsive Image

Images can be made responsive-friendly in order to scale them properly for various devices and viewports.

screenshot showing relative tout display locations

Responsive Embed

YouTube and Kaltura media can be added and made responsive-friendly in order to scale (16:9 aspect ratio) properly for various devices and viewports.

YouTube

Use the YouTube embed URL as the iframe source.

Kaltura

Use the Kaltura video URL as the iframe source.

Figure

For self-contained content, e.g., illustrations, diagrams, screenshots, photos, etc., often with a caption.

Caption Top

Home page tout order
screenshot showing relative tout display locations

Caption Bottom

screenshot showing relative tout display locations
Home page tout order

Table

Tables should only be used for rendering data that belongs naturally in a grid where the data objects have similar properties, i.e., tabular data, with optional caption.

Basic

Tech Repair Rates
Service Rate
Software installation $40/half-hour
Operating system upgrade $120 + purchase of the OS software
Hardware upgrade/installation (RAM, hard drives, network cards, etc.) $40/half hour

Striped Rows

Tech Repair Rates
Service Rate
Software installation $40/half-hour
Operating system upgrade $120 + purchase of the OS software
Hardware upgrade/installation (RAM, hard drives, network cards, etc.) $40/half hour

Panel

Use the panel component for situations that require putting content in a box.

Basic

Information and Technology Services provides technology and communications services in support of U-M Ann Arbor's academic and research needs.

Heading

Information and Technology Services
Information and Technology Services provides technology and communications services in support of U-M Ann Arbor's academic and research needs.

Table

A basic, non-bordered Table can be added.

Tech Repair Rates
If you are unsure about the nature of your problem, bring your computer in. We can test your machine and provide a cost estimate before any repair work is done.

Service Rate
Software installation $40/half-hour
Operating system upgrade $120 + purchase of the OS software
Hardware upgrade/installation (RAM, hard drives, network cards, etc.) $40/half hour