Basics

Jump to:
Headings Paragraphs Lists Colors Buttons Images Steps Iconography Content Row Examples

Note: Content Guide items have been moved to a separate page. Yellow buttons indicate Content Guide Items.

Headings

H1 Page Title

Used only for/by template

H1 style here for information only)

H2 Normal

2.5rem 40px

H2 with Section Header class

2.5rem 40px

H3 Normal also size of Section Title class

2rem 32px

H4 also the size for Article Title and Card Title

1.6rem 25.6px

H5 Normal

1.2rem 19.2px

H6 also the size for Paragraph Title -

1rem 16px


Paragraphs

This paragraph uses class "intro-text". "intro-text" paragraph style can ONLY be used on the first paragraph or two. Use of the "intro-text" style should be cleared by Marketing and/or Web Services. Maecenas in iaculis felis, vitae placerat enim. Duis vehicula, nunc at porta sollicitudin, arcu tortor venenatis ex, in venenatis libero nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor.

Normal paragraph text is 1rem in size which is 16px. Browser default font-size is always 1 em.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis risus vitae ex interdum, in accumsan neque ullamcorper.  ( V-gold should only be used against dark backgrounds as it is difficult to read, otherwise. )  Integer fermentum, nisl eget placerat convallis, tellus massa fringilla eros, vel accumsan turpis lectus id arcu. Curabitur varius elit non ex facilisis condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor.  Curabitur varius elit non ex facilisis condimentum.


Lists

This paragraph uses class "intro-text". "intro-text" paragraph style can ONLY be used on the first paragraph or two. Use of the "intro-text" style should be cleared by Marketing and/or Web Services. Maecenas in iaculis felis, vitae placerat enim. Duis vehicula, nunc at porta sollicitudin, arcu tortor venenatis ex, in venenatis libero nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor.

Intro Text Lists

  • List item
  • List item
  • List item
  • List item

Intro Text Lists with FontAwesome Icon

  • List icons can
  • be used to
  • replace bullets
  • in lists

Lists

  • List item
  • List item
  • List item
  • List item

Lists with FontAwesome Icons

  • List icons can
  • be used to
  • replace bullets
  • in lists

Steps - with Stacked FontAwesome Icons

Sample Content

1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis risus vitae ex interdum.
2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis risus vitae ex interdum, in accumsan neque ullamcorper. Student Forms Lorem ipsum.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.

3 Submit one letter of recommendation.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.

4 Integer a nibh nec felis varius maximus nec sit amet dolor.


Colors

.bg-primary
.bg-secondary
.bg-info
.bg-light
.bg-dark
.bg-white

Buttons

General Use

  • in paragraph content, consider the visual weight and value of surrounding elements to determine solid or outline; primary, dark or secondary; large or small button
  • lots of buttons in viewport, consider outlines styles, small buttons or text links
  • single button in viewport consider solid styles
  • when in doubt, aim for “medium” visual contrast (color, size and weight) of button to surrounding elements (rather than high or low contrast)
  • Refrain from allowing button text to wrap within button

Link vs. Button

  • When the action is secondary, or lower in the hierarchy, use a text link i.e. Tour East Campus (button), Tour West Campus (button), View All locations (text link)
  • Consider Using List Group Links for a long list of links.
Vertical Button Group with padding & margins

Primary

Regular Size
Small Size
  • First button in a group should use primary solid button style
  • If using a button on a single card and one action is desired, use a solid style button
  • When more than one card appears in close proximity, use an outline style

Secondary

Regular Size
Small Size
  • Subsequent buttons in a group should be dark outline style
  • If card title is a link (red underline), then button should be dark outline style

Info

Regular Size
Small Size

Dark

Regular Size
Small Size

Light (use on dark background only)

Regular Size
Small Size

Image Standard Sizes

Images on our site are responsive—they resize for the user’s device. And responsive images are best considered by aspect ratio, rather than exact measurements. Aspect ratio is a proportion of an image’s width and height. For example, a rectangle 600 pixels wide by 400 pixels high has an aspect ratio of 3:2.

Ratios: We use four standard aspect ratios for image sizes:

  • 3:2
  • 2:3
  • 2:1
  • 1:1

 

 

Sizes: Images should have a maximum dimension of 2000 pixels—no one side should exceed 2000 pixels, regardless of aspect ratio.

Staff/Employee Portraits: When preparing staff photos, the maximum dimension is 600 pixels at 1:1 aspect ratio.

 

 

Horizontal Images 3:2

This is one of the two standard sizes for images to be used in the body of a webpage. These images should not include text that is meant to help direct or inform a user. If text is needed on top of an image, this can be done with actual html text.

Contact Web Services can help with this.

Recommended Size: 1000 x 667 

Vertical Images 2:3

This is the second of the two standard sizes for images to be used in the body of a webpage. These images should not include text that is meant to help direct or inform a user. If text is needed on top of an image, this can be done with actual text.

Contact Web Services for help with images.

Recommended Size: 667 x 1000

Banners 2:1

This image ratio is reserved for page headers.
More information coming on this at a later date.

If you have an image you would like to be used for a header, make sure that it can be cropped at a 2:1 ratio. All headers have to be approved by Marketing. Marketing will also be happy to help find, size & crop an image for your header.

Square Images 1:1

This is a specialized size that will mainly be used on 1:1 for horizontal; also 1:1 for faculty photos and thumbnails.

Contact Web Services for help with images.

Recommended Size: 600 x 600

Figures & Captions

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

Example of figure (which is used to display a piece of content—like an image with an optional caption) with rounded corners.


Steps

This is a replacement for the Atena Steps to Enroll. Note that you must close any div class="container" to make the gray full width. Then reopen a new div after.

Explanation Text/Title
Step 1

Step 1 Text

Step 2

Step 2 Text

Step 3

Step 3 Text

Step 4

Step 4 Text

Step 5

Step 5 Text


Iconography

Using a common set of identifiers across all sites will help users quickly identify the information they need. Below are icons, images & styles that can be used to visually identify these areas.

Contact Icons

Small Icons in black or gray should be used to identify common contact info

  • Building and/or Room Number
  • Street Address
  • Mailing Address
  • Phone Number
  • Fax Number
  • TTY (Telephone-Text-Device)
  • Email
  • Name, Title
  • Hours
  • Date
  • Time
  • URL
  • External URL

Location Icons

  • Campus
  • School of...
  • Center for...
  • Office