Skip to main content

UMSL Web Style Guide

Below are approved web styles for use across all umsl.edu websites as well as helpful hints to make your sites look and function great. Need help? Reach out to us at webmarketing@umsl.edu.



.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.



Web and Electronic Communication Policies

UMSL's web and electronic communication policies help maintain consistency in presenting university information and ensure the university’s digital presence accurately reflects the university’s brand identity. Official and publicly viewable unit (e.g., division, college, school, department, center, program or organization) websites must adhere to the following policies. View Web and Electronic Communication Policies

Style Guide, Sign Policy and Logos

The University of Missouri-St. Louis is recognized by its name and the symbols that represent the organization. Words, colors, and the UMSL logotype are among the visual tools the university uses to identify and distinguish itself; these tools, used together, enable the university to construct its brand identity. It's important that standards be in place to ensure consistency when the university communicates. Consistency helps the university establish a clearly focused and effective brand identity. View UMSL Style Guide, Sign Policy and Logos