Skip to main content

Main Content

Lockup

This component has been deprecated.

Description

At Stanford, a department logo or signature, also called a lockup, is used to identify a university department, unit or group.

There is more than one correct way to create these department logos. The lockup can communicate organization hierarchy depending on how formal or informal you need to be. For designers and developers, it is important to note that with the Stanford department signature system, text styles and sizes are used to communicate specific levels of hierarchy relative to the department, unit or group in question.

Learn more about how to use department signatures

Please note that the Decanter default style shown below shows the different text areas and styles available in the Decanter lockup. For actual usage information, please refer to the variant styles listed below.

Important Notice: Stanford University lockup options C, G, J, and Q will be removed in Decanter Version 7.

Default Style

Example Markup

<div class="su-lockup [ modifier_class ]"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

Style Variants

.su-lockup--option-a

Multidisciplinary (or Long School Name + Unit)

Example Markup

<div class="su-lockup su-lockup--option-a"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-b

Unit (2 lines, big/small)

Example Markup

<div class="su-lockup su-lockup--option-b"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-c

Option C

Example Markup

<div class="su-lockup su-lockup--option-c"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-d

Unit + Level

Example Markup

<div class="su-lockup su-lockup--option-d"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-e

Unit (2 lines) + Level

Example Markup

<div class="su-lockup su-lockup--option-e"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-f

Unit (2 lines, big/small)

Example Markup

<div class="su-lockup su-lockup--option-f"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-g

Option G

Example Markup

<div class="su-lockup su-lockup--option-g"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-h

School + Unit (2 lines)

Example Markup

<div class="su-lockup su-lockup--option-h"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-i

School + Unit + Level

Example Markup

<div class="su-lockup su-lockup--option-i"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-j

Option J

Example Markup

<div class="su-lockup su-lockup--option-j"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-k

Alt School + Unit (1 line)

Example Markup

<div class="su-lockup su-lockup--option-k"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-l

School Only

Example Markup

<div class="su-lockup su-lockup--option-l"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-m

School + Unit (2 lines)

Example Markup

<div class="su-lockup su-lockup--option-m"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-n

School + Unit (1 line)

Example Markup

<div class="su-lockup su-lockup--option-n"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-o

Vertical – School

Example Markup

<div class="su-lockup su-lockup--option-o"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-p

School + Unit (1 line)

Example Markup

<div class="su-lockup su-lockup--option-p"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-q

Option Q

Example Markup

<div class="su-lockup su-lockup--option-q"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-r

Vertical – Unit

Example Markup

<div class="su-lockup su-lockup--option-r"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-s

Vertical – School + Unit

Example Markup

<div class="su-lockup su-lockup--option-s"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>

.su-lockup--option-t

Vertical – School + Unit + Level

Example Markup

<div class="su-lockup su-lockup--option-t"> <a href="https://decanter.stanford.edu"> <div class="su-lockup__cell1"> <div class="su-lockup__wordmark-wrapper"> <span class="su-lockup__wordmark">Stanford</span> <span class="su-lockup__line4">Engineering</span> </div> </div> <div class="su-lockup__cell2"> <span class="su-lockup__line1">Finance</span> <span class="su-lockup__line2">Program In Thermal Optics</span> <span class="su-lockup__line3">Mechanical Engineering</span> </div> <div class="su-lockup__line5 ">School of Humanities & Sciences</div> </a> </div>