You can download a PDF version of the below as a reference sheet.

If you are linking to a document, or a site outside of your departmental site, please rememebr to set the "target" of the link to "_blank" so that it opens in a new tab.

To create a button:

  • Select the text you would like to have be a link and click the link button.
  • Click the Advanced tab and paste in one of the below button classes in the right hand column
Button Type Button Class
Button Type PDF button neutral type-pdf
Button Type Excel button neutral type-excel
Button Type MS Word button neutral type-msword
Button Type Video button neutral type-video
Button Type Image button neutral type-image
Button Type File button neutral type-file
Button Type File Download button neutral type-file-download
Button Type Folder button neutral type-folder
Button Type Home button neutral type-home
Button Type Email button neutral type-email
Button Type Phone button neutral type-phone
Button Type Calendar button neutral type-calendar
Button Type Right Chevron button neutral type-chev-right
Button Type Book button neutral type-book
Button Type External Link button neutral type-external-link
Button Type Question button neutral type-question
Button Type ID button neutral type-id
Button Type Search button neutral type-search
Button Type News button neutral type-news
Button Type Clipboard button neutral type-clipboard
Button Type Link button neutral type-link
Button Type Give button neutral type-give
Button Type External Link button neutral type-external-link

Variations

Add the class "after" to position the icon on the right side of the button

Button Type PDF After

Class - button neutral type-pdf after


Replace the class "neutral" with the class "secondary" in order to make the button red

Button Type PDF Secondary

Class - button secondary type-pdf after


Make the button text larger or smaller by adding the classes: "tiny", "small", "large"

Button Type Example Text Tiny

Class - button neutral type-pdf tiny

Button Type Example Text Small

Class - button neutral type-pdf small

Button Type Example Text Large

Class - button neutral type-pdf large


Add the class "expanded" to any button to make the button span the width of the container

Button Type Example Expanded

Class - button neutral type-pdf expanded