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

Color Scheme

.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



Typography

The Proxima Nova family of fonts are used throughout the University of Missouri–St. Louis website.

h1. UMSL heading

<h1>h1. UMSL heading</h1>

h2. UMSL heading

<h2>h2. UMSL heading</h2>

h3. UMSL heading

<h3>h3. UMSL heading</h3>

h4. UMSL heading

<h4>h4. UMSL heading</h4>
h5. UMSL heading
<h5>h5. UMSL heading</h5>
h6. UMSL heading
<h6>h6. UMSL heading</h6>


Body Copy

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.



Buttons

<button type="button" class="button button-apply">APPLY</button>
<button type="button" class="button button-give">GIVE</button>
<button type="button" class="button button-tour">TOUR</button>
<button type="button" class="button button-register">REGISTER</button>




Tables

Red table

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @jacob
3 Larry the Bird @twitter


<table class="red-table">
    <thead>
           <tr>
                <th>#</th> 
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th> 
            </tr>
    </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@jacob</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
    </tbody>
</table>   


Gray Table

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @jacob
3 Larry the Bird @twitter


<table class="gray-table">    
    <thead>
            <tr>
                <th>#</th> 
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th> 
            </tr>
        </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@jacob</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry </td>
            <td>the Bird<td>
            <td>@twitter<td>
        </tr>
    </tbody> 
</table>




Responsive tables

Horizontally scrolling table content

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @jacob
3 Larry the Bird @twitter
<div class="table-responsive">
    <table class="table red-table">
        <thead>
            <tr>
                <th>#</th> 
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th> 
            </tr>
        </thead>
    <tbody>
        <tr>
            <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@jacob</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
<td>@twitter</td> </tr> </tbody> </table> </div>

Block style

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @jacob
3 Larry the Bird @twitter

<table class="block-table red-table">
        <thead>
            <tr>
                <th>#</th> 
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th> 
            </tr>
        </thead>
    <tbody>
        <tr>
            <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@jacob</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry </td>
                <td>the Bird<td>@twitter
            </tr>
        </tbody>
    </table>


View detailed information on utilizing table classes


 

Site Header

Site header

Users may not edit the site header in any way. The header includes top navigation with popular links by audience (current students, faculty/staff, alumnni) and quick links for directories, maps, a-z index, apply, tour and give. To the right of the UMSL logo, the formal site name is displalyed in text. Below the site header are areas that can be edited within the CMS including the breadcrumb naming structure and the page title. These areas may not be reformatted.

 

Footer

site footer

Users may not edit the site footer in any way except to edit the contact information for the given site availalbe under (site-nav) on the base folder. The footer includes copyright, privacy policy, equal opportunity statement, and DMCA policy. In addition, a quick links are included and icons promoting university-level social media and blog account (non-editable).

 

Alerts


Well done! You've successfully read this important alert message.

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

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

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

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

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