Style Guide

Below are approved web styles for use across all umsl.edu websites.


.umsl-primary
rgb(152,30,50)
#981e32

.umsl-secondary
rgb(234,171,0)
#eaab00

.umsl-gray
rgb(68,68,68)
#444444

.umsl-light-gray
rgb(238,238,238)
#eeeeee

.umsl-lightest-gray
rgb(249,249,249)
#f9F9f9

 

Heading Tags

Headings are defined with the <h1> to <h6> tags where <h1> defines the most important heading and <h6> defines the least important heading. Search engines use the headings to index the structure and content of your web pages. Headers visually show the user the content structure. Similarly, assistive technologies like screen readers use headers as a table of contents allowing visitors to quickly navigate page content. To this end, do not use headings solely for visual styling such as making text a larger font.

Example:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Source Code:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4 </h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

A subhead is a way to call out a section of text without defining the page structure using a heading tag. Use this class to distinguish important content areas such as Mission Statement.

Example:

Mission Statement

Source Code:

 <p class="content-subhead">Mission Statement</p>

Paragraph

The <p> tag defines a paragraph.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Source Code:

<p>This is a paragraph.</p>
<p>This is a second paragraph.</p>


Lead Paragraph

The addition of a lead paragraph class will help call atttention to important body copy on a page. It is recommended to only distinguish one lead paragraph per page, as needed, and limit it to the opening paragraph content.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Source Code:

<p class="lead-paragraph">This is a lead paragraph.</p>

A <blockquote> tag typically specifies a section of copy that is quoted from another source. The copy is indented to distinguish it from regular paragraph text.

Example:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." - Source

Source Code:

<blockquote>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." - Source</p>
</blockquote>

Color text and backgrounds can convey meaning on the web. For example, all linked text on our site displays as red text and becomes bold with an underline when hovered over to indicate to site visitors that the text is clickable. There may be times you want to use contextual colors or backgrounds to convey meaning.

Text Color

Example:

This text is red.

This text is gold.

This text is blue.

Source Code:

<p class="text-muted text-red">This text is red.</p>

<p class="text-success text-gold">This text is gold.</p>

<p class="text-blue">This text is blue.</p>


Backgrounds

Example:

Well done! You've successfully read this message.

Heads up! This alert needs your attention, but it's not super important.

Warning! This alert needs your attention and is very important.

Error! Change a few things up and try submitting again.

Source Code:

<div class="alert alert-success"><strong>Well done!</strong> You've successfully read this alert message.</div>

<div class="alert alert-info"><strong>Heads up!</strong> This alert needs your attention, but it's not super important.</div>

<div class="alert alert-warning"> <strong>Warning!</strong> This alert needs your attention and is very important.</div>

<div class="alert alert-danger"><strong>Error!</strong> Change a few things up and try submitting again.</div>

Buttons act as a call to action for site visitors. We recommend keeping the text short and in all caps.

Examples with Source Code:

LINK TEXT

<a class="button button-apply" href="/insert-url">LINK TEXT</a>

LINK TEXT

<a class="button button-give" href="/insert-url">LINK TEXT</a>

LINK TEXT

<a class="button button-tour" href="/insert-url">LINK TEXT</a>

LINK TEXT

<a class="button button-register" href="/insert-url">LINK TEXT</a>

LINK TEXT

<a class="button button-secondary-gold" href="/insert-url">LINK TEXT</a>

LINK TEXT

<a class="button button-secondary-blue" href="/insert-url">LINK TEXT</a>

LINK TEXT

<a class="button button-ghost-red" href="/insert-url">LINK TEXT</a>

How To:

Highlight the text copy you want to make a button. Then click the Insert/Edit Link button in the content editor. Set the internal or external url link, then select the button style you want to include under the Class option.

While there is a Table tool built into the content editor of the CMS, the best way to get a clean table that is both stylized and mobile friendly is to start with the source code below. Simply copy the source code below, open the Source Code editor (indicated by <> in the content editor) and paste in the code where you want the table to be on the page. Before you close the source code view, edit the summary="add summary text" code to include a brief summary of the table for accessibility purposes. After these steps, you'll see the example table below on your page.

Example:

Header Row, Column 1 Header Row, Column 2 Header Row, Column 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3
Row 3, Column 1 Row 3, Column 2 Row 3, Column 3

Source Code:

<table class="basic-table" summary="add summary text">
<thead>
<tr>
<th>Header Row, Column 1</th>
<th>Header Row, Column 2</th>
<th>Header Row, Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</tbody>
</table>

To Edit the Example Table: Right click in a cell, select either Row or Column, then select to Insert or Delete a row or column. Follow those steps to make the table meet your row/column requirements. You can also select multiple cells to split or merge them. Do not change table, cell, or row properties as the "basic-table" class provided in the source code ensures the best user experience. Tables should never include set widths or heights and should not be used to layout page content other than actual table content.

Responsive images scale up or down to fit the browser window. You can set images to be responsive entirely from the "Insert/Edit Image" tool in the content editor.

Thomas Jefferson Library glass pyramid

Example:

In our example, we're setting an image to display at 50% of the width of the content section, aligned right and with a 5 pixel padding on all sides. We've also added a brief description of the image that displays in code as an "alt" tag meaning alternate text.

Source Code:

<img alt="Thomas Jefferson Library glass pyramid" src="/files/images/pyramid.jpg" style="float: right; margin: 5px;" width="50%" />

How To:

To get started, select an image file and fill out the description information. Images should not contain a lot of text information. For those with screen readers, the image description reads the image description to provide context to the user.

Next, set the dimension properties. By default, the pixel width and height of the image will display. If you leave this as-is, the image will display at that fixed width and height across window sizes. For a responsive image, we use percent width to set the size. Simply delete the width and height defaults and type in a percent width only (the first dimension box). 100% will make the image display at the full width of the content section. So, if you're using a two column layout, the image will display at the full width of the column.  Use smaller percentages to make the image display smaller. For example, if you want the image to display at half the size of the content section, insert 50% as the width.

You can set padding - open space to the top/bottom (vertical padding) and left/right (horizontal padding) on the advanced tab. This will ensure you have space between the image and content that may be around it. After you insert the image, you can use the Align left, Align center, or Align right options in the content editor.

Best Practices

Below are best practices as well as helpful hints to make your sites look and function great.


  • URL structure should be readable, succinct and intuitively communicate the content/subject matter of the page
    • Limit URLS to keywords, phrases using alphanumeric characters and placing a hyphen between words when necessary
    • Limit the use of stop words (and, or, but, of, that, a, etc.)
    • URL should not contain blank or empty spaces, underscores, or other special characters ( ~ $ < > # % { } [ ] | \ & + , . / : ; = ? @ )
  • Heading tags should be used to define page structure
    • Only one <h1> tag may be used per page
    • Use proper nesting of headings
    • Do not use text formatting (such as font size or bold) to give the visual appearance of headings, nor use headers to achieve visual results only.
  • Use list tags to convey hierarchical content
    • Use an unordered list <ul> when there is no order of sequence or important
    • Use an ordered list <ol> when suggesting a progression or sequence
    • Use a definition list <dl> only when presenting a structure for definitions
  • Correct classes should be used to style page content
  • Assets including images, pdfs, and external links should be organized within the files/ folder structure
  • Page structures defined by CMS master templates (header, footer, bread crumbs, etc.) may not be manipulated
  • Page footers must include unit contact information
  • Page should include relevant metadata
    • Page title (no more than 65 characters in length)
    • Page description (between 150 and 170 characters in length)
    • Keywords (separate with commas)


h1. UMSL heading

h2. UMSL heading

h3. UMSL heading

h4. UMSL heading

h5. UMSL heading
h6. UMSL heading
  • All links must be active and properly functioning 
  • Links directing to pages within the same site should be linked using the “Internal” insert option
  • Links directing to pages outside the site should be linked using the “External” insert option
    • You can copy and paste in a URL such as http://www.domain.edu/pagename. However: when linking to pages on the umsl.edu domain, make sure the URL is in an https format, so the would read: https://www.umsl.edu/sitename.
  • Link "Targets" should be set as:
    • Same Window: use when a link directs to a page housed within the umsl.edu domain
    • New Window: This opens a new tab for each link and is not user friendly. If you feel you must use it, only do so when linking to pages that are not housed within the umsl.edu domain
  • Linked text should be two to three words long using descriptive words that indicate where the link directs to (avoid "click here" links and listing full URLs)
  • Use the same text for links that direct users to the same place
  • Links should include the “Title” tag when additional information is needed to describe the purpose of the link
  • When linking to file downloads, such as a PDF, include the file extension and size with the linked text
Hand holding an iphone displaying campus map application
  • Individual images should not be larger than 250 kilobytes in size with an image resolution of at least 72 pixels per inch.
  • To assist users with visual impairments, images should include “Alternate Text” tags to provide a description and purpose of the image
    • Use a description of 140 characters or less as screen readers will not read longer
    • Decorative images that are nonessential to the page content should use blank alternate text tags
  • If complex images that include substantial text must be used, complimentary text that provides the image information should be included in the page content
  • Images should use appropriate padding
  • Always strive for a diversity of images and inclusive subject matter
  • Image content should be professional and appropriately represent the university
  • Avoid flashing media/images for those with photosensitive epilepsy
  • Ensure images are responsive
  • Follow university Digital Asset Management guidelines
UMSL Campus Beauty Spot (01:00)


  • List topic and length of video in text above an embedded video if the player does not automatically provide this
  • Videos should include accurate captioning or full transcripts
  • Embedded videos should be linked using https://
  • Do not set videos to auto play
  • Avoid flashing media/images for those with photosensitive epilepsy
  • Ensure videos are responsive
  • Follow university Digital Asset Management guidelines
  • Tables should include a descriptive header title or caption
  • Include summary a summary description in HTML
  • All tables should be responsive using the appropriate table class or use of percentages for proportional sizing
  • Avoid defining cell height as it can cut off text when zooming.
  • Unless necessary to convey information accurately, tables should not be used to style page content or provide page layout options
  • Use the simplest table configuration possible
  • Colors should not be used to convey important information that may be indistinguishable for those with visual impairments

  • Page content should be accurate and up-to-date, free of spelling errors

  • Content should follow UMSL's grammar, usage and style guidelines

The UMSL events calendar is hosted on and runs on the Localist platform . Localist is a social calendaring application. Any user with a campus-issued UserID can log in and create an account in the calendar. View calendar information and best practices.

Digital Asset Management refers to the hosting, management, organization, cataloguing, archiving and distribution of digital assets - rich media such as photographs, videos, audio files, graphics, logos, and marketing collateral. A digital asset is any form of content or media that has been formatted into a binary source and includes the right to use it (See DMCA policy). 

Digital assets owned by the university must be managed appropriately. The university maintains several repositories of digital assets including repositories that are stored in local (network attached) file storage systems, cloud file storage systems (Google and Box), and within commercially available systems (PhotoShelter). Contact UMSL Information Technology Services to determine the appropriate university repository for your needs.

Specific to the university's web environment, most all digital assets should be uploaded to the university's server(s) via the Content Management Systems (Cascade, WordPress). However, some assets such as video, may be hosted on a third-party platform such as YouTube or Vimeo, provided that the asset is hosted through an official, university-owned and managed account with multiple admins, and not associated with an individual or non-university account.