University Signatures

Policy

Before using university signatures for the Web, please review logo policy on the Identity website.

Examples

Black text

University of Missouri

Markup
<div class="mu-sig mu-sig--light">
    <p class="mu-sig__logo"><a href="http://missouri.edu">Mizzou Logo</a></p>
    <h2 class="mu-sig__wordmark"><a href="http://missouri.edu">University of Missouri</a></h2>
</div>

SASS CSS
.mu-sig--light
{
    background: $gray-100;

    @include mu-sig(
        $size: 'medium'
    );
    
    @media #{$query-small}
    {
        @include mu-sig(
            $size: 'small'
        );
    }
            
    @media #{$query-large}
    {
        @include mu-sig(
            $size: 'large'
        );
    }
    
    @media print
    {
        @include mu-sig(
            $size: 'large',
            $print: 'true'
        );
    }
}

White text

University of Missouri

Markup
<div class="mu-sig mu-sig--dark">
    <p class="mu-sig__logo"><a href="http://missouri.edu">Mizzou Logo</a></p>
    <h2 class="mu-sig__wordmark"><a href="http://missouri.edu">University of Missouri</a></h2>
</div>

SASS CSS
.mu-sig--dark
{
    background: $gray-600;

    @include mu-sig(
        $size: 'medium',
        $color: 'white'
    );
    
    @media #{$query-small}
    {
        @include mu-sig(
            $size: 'small',
            $color: 'white'
        );
    }
            
    @media #{$query-large}
    {
        @include mu-sig(
            $size: 'large',
            $color: 'white'
        );
    }
    
    @media print
    {
        @include mu-sig(
            $size: 'large',
            $print: 'true'
        );
    }
}

Centered text

University of Missouri

Markup
<div class="mu-sig mu-sig--center">
    <p class="mu-sig__logo"><a href="http://missouri.edu">Mizzou Logo</a></p>
    <h2 class="mu-sig__wordmark"><a href="http://missouri.edu">University of Missouri</a></h2>
</div>

SASS CSS
.mu-sig--center
{
    background: $gold-400;

    @include mu-sig(
        $size: 'medium',
        $center: 'true'
    );
    
    @media #{$query-small}
    {
        @include mu-sig(
            $size: 'small',
            $center: 'true'
        );
    }
            
    @media #{$query-large}
    {
        @include mu-sig(
            $size: 'large',
            $center: 'true'
        );
    }
    
    @media print
    {
        @include mu-sig(
            $size: 'large',
            $print: 'true'
        );
    }
}

Mixin Options

The mu-sig() mixin has a set of variables that can be passed to it to define size, style and printing options. Below are the mixin options.

$size:              (Optional) Signature size. Can be `extra-small`, `small`, `medium`, or `large`. Defaults to 'small'
$color:             (Optional) Text color. Can be `black` or `white`. Defaults to 'black'
$center:            (Optional) Whether to center the signature. Defaults to false
$print:             (Optional) Whether to set the images up for printing. Defaults to false and uses the black version of wordmark and unit name

The markup is required to have classes of mu-sig__logo and mu-sig__wordmark with the elements in that order.

<div class="mu-sig">
    <p class="mu-sig__logo"><a href="http://missouri.edu">Mizzou Logo</a></p>
    <h2 class="mu-sig__wordmark"><a href="http://missouri.edu">University of Missouri</a></h2>
</div>

Anatomy

A university signature is made up of two parts:

  1. Stacked MU logo
  2. Wordmark