Web Patterns Library

The patterns library is a collection of user interface design elements. These elements appear multiple times on the site and should maintain the same look and feel whenever they are used. This documents all of these patterns and defines how they behave, what they look like and how they are coded.

Alert classes should be added to a <div> element with the text inside the div tags.

Standard Alert

class="alert"

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium eaque reprehenderit eligendi ducimus velit, consequuntur dolore ratione. Aliquid iste distinctio eveniet voluptate illum, repellat adipisci laudantium incidunt debitis perferendis quod.

Warning Alert

class="alert alert-warning"

Voluptatem ut nisi magnam dolorem dolore quo, accusamus sequi voluptatibus amet laborum adipisci ipsa architecto? In, sunt molestiae nihil accusamus explicabo animi maxime molestias autem fuga, adipisci deleniti. Illo, nemo!

Danger Alert

class="alert-danger-alt"

If you are in danger, dial 911

Info Alert

class="alert alert-info"

Aspernatur dolorum fuga optio? Cumque laboriosam, officiis quae voluptas. Odit quam veritatis ipsum iure assumenda voluptates obcaecati consequuntur porro, delectus sunt ipsa blanditiis atque nihil eius, voluptatibus quos et. Deserunt!

Dismissable Alert

Can be used with any of the alert styles, except the Danger Alert Alt.

SUU Emergency Notification

This is a test of the SUU Emergency Notification System. In the event of an actual emergency, further details would be provided here.

The HTML for a dismissable alert:

Buttons should be used for functionality or special links that need to stand out, such as a page's call to action. Most pages on the SUU website are information-oriented, and they should probably be limited to 2-4 buttons each.

Button Sizes

btn btn

This button
is important btn btn-mega

Learn More btn btn-small

Forms should almost always use btn btn-small

Button Block

btn-block can be used with any size and style of button. The class will cause the button to span the full width off its parent container across all screen sizes.

btn btn-block

btn btn-block

Button Block Mobile

Sometimes we want our button to expand the full-width of the parent container on mobile widths only. This can be achieved using the class btn-block-mobile in place of btn-block.

btn btn-block-mobile btn-block-mobile

*This button will span the full width of the screen as you resize the window and it reaches 768px or less

Button Colors

Colors are only approved for use on small buttons so that the Call to Action colors remain the largest, most prominent on the page. Their usage should be reserved to form inputs or low-level Call to Actions in cards or sub-modules. They are limited in their application and should be used sparingly.

Submit btn btn-primary-solid btn-small

Reset btn btn-primary btn-small

Submit btn btn-dark-solid btn-small

Reset btn btn-dark btn-small

Button Group

btn-group

btn dropdown-toggle
  • First Item
  • Second Item
  • Third Item

btn dropdown-toggle

Call to Action

These styles are reserved for buttons meant to prompt an immediate response from the user. These styles should only be used for this purpose. The language used on these buttons should be concise and encourage a specific action from the user. There should only be 1-3 CTA buttons on any given page in most situations. 

Apply cta cta-primary

Apply cta cta-secondary

Icon Buttons

Icon buttons are heavily restricted and their use must be approved by the Marketing Communication office.

Notes

Do not put buttons in the middle of a sentence or paragraph. It disrupts the reader's flow.

SUU uses FontAwesome for all web icons. Contact Web Services to request using icons on your projects.

Web forms are useful for enabling visitors to contact you or your department. Most forms will send an email notification or create a row in a spreadsheet each time a visitor submits a new entry.

SUU uses JotForm for building and maintaining forms. If you need one, consult Web Services.

SUU utilizes a grid system of 12 columns. The columns are responsive, meaning they will attempt to fit the width of the screen and stack vertically as the screen width approaches mobile sizes.

Your content should always be configured to use all 12 columns.

1
1
1
1
1
1
1
1
1
1
1
1
6
6
3
9
12

Every page must start with a level 1 heading (aka heading 1, or h1).

Use different levels of headings to organize your pages. Think of a heading as the start of a section. The whole page counts as a section unto itself, so it starts with a heading 1. If you need to subdivide the page into sections, start each one with a level 2 heading. If you need to divide those again, use a heading 3, etc.

h1 Heading 1

h2 Heading 2

h3 Heading 3

h4 Heading 4

h5 Heading 5
h6 Heading 6

Only six levels of heading are available. If you need more layers than this, try reorganizing the content.

Headings should not be used as subheadings. The following is an example of incorrect usage:

h3 Main Heading

h4 Subheading

Use of the <small> tag is an appropriate way to communicate a subheading:

Main Heading
Subheading

Labels

Labels can be used to label and annotate text.

Label Styles
Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Success Dark <span class="label label-success-dark">Success Dark</span>
Brand <span class="label-brand">Brand</span>
Warning <span class="label label-warning">Warning</span>
Info <span class="label label-info">Info</span>
Info Dark <span class="label label-info-dark">Info Dark</span>
Inverse <span class="label label-inverse">Inverse</span>

Badges

Badges are small, simple components for displaying an indicator or count of some sort.

Badge Styles
Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Success Dark 2 <span class="badge badge-success-dark">2</span>
Brand 6 <span class="badge badge-brand">6</span>
Warning 6 <span class="badge badge-warning">6</span>
Info 8 <span class="badge badge-info">8</span>
Info Dark 8 <span class="badge badge-info-dark">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

By default, all links display red and underlined like this.

Certain links will display with icons indicating where or what the link goes to.

Examples

Link Icon Styles
Link Type href match Icon Example
PDF [href$='.pdf'], [href$='.PDF'] PDF
Word Document [href$='.doc'], [href$='.docx'] Word Document
Excel Spreadsheet [href$='.xls'], [href$='.xlsx'] Excel Spreadsheet
PowerPoint Presentation [href$='.ppt'], [href$='.pptx'] PowerPoint Presentation
ZIP Archive [href$='.zip'] ZIP Archive
Phone Link [href^='tel:'] (435) 586-7700
Email Link [href^='mailto:'] example@example.com

Exceptions

In cases where a link icon will not work, such as for non-plaintext links, the no-icon class can be applied to the a element.

.no-icon Phone Link: (435) 586-7700
Example: <a class="no-icon" href="tel:+1(435) 586-7700">(435) 586-7700</a>

Phone link icons in the footer will display with a white icon, rather than black.

  1. Ordered and Unordered Lists
    1. Unordered Lists
    2. Ordered Lists
  2. Other List Layouts using Ordered & Unordered Lists
    1. Unstyled Lists
    2. Inline Lists
    3. Columns
  3. Definition Lists
    1. Horizontal Definition Lists
  4. Details/Summary

Ordered & Unordered Lists

Unordered Lists ul

Disc (Default)

  • Lorem ipsum dolor sit amet.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Nunc dignissim risus id metus.
  • Cras ornare tristique elit.

Circle .list-circle

  • Lorem ipsum dolor sit amet.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Nunc dignissim risus id metus.
  • Cras ornare tristique elit.

Ordered Lists ol

Decimal (Default)

  1. Lorem ipsum dolor sit amet.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  4. Nunc dignissim risus id metus.
  5. Cras ornare tristique elit.

Decimal Leading Zero ol.decimal-leading-zero

  1. Lorem ipsum dolor sit amet.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  4. Nunc dignissim risus id metus.
  5. Cras ornare tristique elit.

Lower Alpha ol.lower-alpha

  1. Lorem ipsum dolor sit amet.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  4. Nunc dignissim risus id metus.
  5. Cras ornare tristique elit.

Upper Alpha ol.upper-alpha

  1. Lorem ipsum dolor sit amet.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  4. Nunc dignissim risus id metus.
  5. Cras ornare tristique elit.

Lower Roman ol.lower-roman

  1. Lorem ipsum dolor sit amet.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  4. Nunc dignissim risus id metus.
  5. Cras ornare tristique elit.

Upper Roman ol.upper-roman

  1. Lorem ipsum dolor sit amet.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  4. Nunc dignissim risus id metus.
  5. Cras ornare tristique elit.

Other List Layouts using Ordered & Unordered Lists

Unstyled List ul.unstyled

NOTE: while it will behave similarly, ol.unstyled should not be used.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Nunc dignissim risus id metus.
  • Cras ornare tristique elit.

Inline Lists ul.list-inline

Inline lists display list items in a row, rather than on separate rows. It is useful in cases where you may have a list of links which all have relatively short labels.

NOTE: while it will behave similarly, ol.list-inline should not be used.

Inline List with Separator ul.list-inline.list-inline-separator

Inline lists with separators add a bar character | between each item in the list.

Branded Circle List Style

Lists with large red circles used with approval from the Marketing Communication office.

  • Lorem ipsum
  • Dolor sit amet
  • Consectetuer
  • Adipiscing
  • Elit

Columns

Ordered and Unordered lists can also be displayed in two or three columns.

Two-Column List .two-column

  • key chain
  • radio
  • television
  • credit card
  • mop
  • wallet
  • hair tie
  • stop sign
  • bananas
  • beef

Three-Column List .three-column

  • checkbook
  • chocolate
  • bananas
  • hair tie
  • lace
  • wallet
  • camera
  • leg warmers
  • shoes
  • truck
  • cell phone
  • money
  • keys
  • bowl
  • washing machine

On narrow displays, you can have a three-column list reduce to two columns by adding .two-column-narrow to a list which already has .three-column.

  • headphones
  • door
  • mop
  • tooth picks
  • shawl
  • pen
  • rubber duck
  • computer
  • mouse pad
  • mp3 player
  • bread
  • cinder block
  • perfume
  • soap
  • deodorant

Definition Lists dl

Definition lists work well for glossaries or similar use cases. They display the term dt followed, on the following line, by the definition dd, which is indented.

Credits
College courses are measured in terms of credit hours, which usually equate to how many hours a student spends in class each week. Hint: Students need to earn 15+ credits each Fall & Spring semester to graduate in 4 years with 120+ total credits.
College
"College" is often used interchangeably with "university" and "school." Separately, "college" can refer to an academic division of a university, such as College of Education.
Department
A division of the college, made up of faculty and support staff, that gives instruction in a particular field of study.
Graduate School
The division of a college or university which administers graduate studies and awards master's degrees and graduate certificates.
Electives
Courses that students can choose to take for credit toward a degree, but are not required.

Horizontal Definition List dl.dl-horizontal

Horizontal definition lists display the term at the same level as the definition, resulting in two columns.

Credits
College courses are measured in terms of credit hours, which usually equate to how many hours a student spends in class each week. Hint: Students need to earn 15+ credits each Fall & Spring semester to graduate in 4 years with 120+ total credits.
College
"College" is often used interchangeably with "university" and "school." Separately, "college" can refer to an academic division of a university, such as College of Education.
Department
A division of the college, made up of faculty and support staff, that gives instruction in a particular field of study.
Graduate School
The division of a college or university which administers graduate studies and awards master's degrees and graduate certificates.
Electives
Courses that students can choose to take for credit toward a degree, but are not required.

Details/Summary details > summary

The HTML Details Element ( <details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary> element.

On SUU.edu, the widget is presented in the style of a link with a FontAwesome ⁠ character next to it. When activated, the widget expands to display the its contents and the ⁠ is replaced with a ⁠.

Note: Do not nest details/summary blocks, e.g. details > details > summary

This is the <summary>.

The remaining contents of the <details> tag can be any flow content, such as paragraphs, lists, images, etc.

Wells are used to block content out from the other surrounding content.

Standard: class="well"

This text is in a well applied to a paragraph. It can also be applied to a div

White: class="well white-well"

This text is in a well white-well applied to a div.


Stats Well: class="well stats-well"

This text is in a class="well stats-well" applied to a div.

Table of Contents Well: class="well toc-well"

On this page:

  • This text is in a class="well toc-well" applied to a div.
  • It requires an H2 for the Title and a ul for the list items
  • This should only contain anchor links to points further down the page. No external links in a Table of Contents Well. 
  • Use a two-column or three-column list to format, depending on the length of links inside the toc-well. (See Lists section for implementation)

Contact

Web Services