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.

    <div class="alert">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium eaque 
    </div>

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:

    <div class="alert">
      <a aria-hidden="true" class="close alert-close fas fa-times">
<span class="sr-only">Close alert</span>
</a> <h1>SUU Emergency Notification</h1> <p>This is a test of the SUU Emergency Notification System. In the event of an actua
emergency, further details would be provided here.</p> </div>

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

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.

Cards

Cards are blocks of content that serve as links. They can be used with the .well group of classes for additional styles.

<a class="cardlink" href="#">
<div class="well cardwell card">
<img src="/_files/images/home/apply-icon-international.gif" alt="">
<h2 class="centerit majors-heading-red">Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</a>

Image Cards

Image Cards serve as a way to improve the visual representation of a link. Not every link on a webpage should be an Image Card, and they should be used with discretion. First, think about the page content and the target audience/user. Then decide whether an Image Card will best represent your link and content to help the user navigate the site better.

In order for the Image Card to function and behave properly, the following rules must be applied:

  • The class .img-card must be applied to the containing parent <div> element. (See the HTML example below)
  • The <p> tag must be wrapped in a Cascade protect tag <!--#protect <p>Image Card Title</p> #protect-->. (See the HTML example below)
  • The image used should be a minimum of 768 pixels wide regardless of how small it will appear on full desktop windows.
    • The only exception to this rule is if you are using Image Cards inside of a CSS Grid or flex setup and not Bootstrap columns/rows.
  • All source images should be the same width and height for each image card.
  • Image Card titles look best on a single line, but exceptions can be made depending on the situation.

The HTML code for an Image Card

    <div class="img-card">
      <a href="">
        <img src="image.jpg" alt="" />
        <!--#protect <p>Image Card Title</p> #protect-->
      </a>
    </div>

Image Card Alt

As an alternative to the default image cards, you can add a second class to your image card element called, ".img-card-alt".

class="img-card img-card-alt"

This is an option to add some color and life to a page, but should be used sparingly. It can be helpful in cases where you have an image that has a very light or white background with no visible borders (see example below). Ideally, you should not use img-card-alt with more than 6 image cards on a page to reduce the amount of repeating red that can bother the eye.

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
<div class='row-fluid'>
  <div class='span3'>
<p>Content</p>
</div>
<div class='span9'>
<p>Content</p>
</div>
</div>

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

<h3>
Main Heading
<br />
<small>
Subheading
</small>
</h3>

Heading Bar

.heading-bar is a special class which can be applied to headings. It should be used to break up repetitive visual content or in special circumstances.

<h3 class='heading-bar'>Heading Bar</h3> 

Gray Heading Bar

.heading-bar-gray is helper class for .heading-bar that uses an alternative look. The class the original .heading-bar class is required.

<h3 class='heading-bar heading-bar-gray'>Gray Heading Bar</h3> 

Helper Class Headings

Headings can be modified using helper classes. This headings uses h2 .text-branded .primary-font-condensed together to create a special headings used to bring attention to a specific point of interest. These helpers should be use only in approved circumstances.

Labels

Labels can be used to label and annotate text.

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>
Light <span class="label label-light">Light</span>

Badges

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

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 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
Flickr Link [href^='http://www.flickr.com'],
[href^='http://flickr.com'],
[href^='https://www.flickr.com'],
[href^='https://flickr.com']
Flickr

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.

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.

<details>
    <summary>This is the <code>&lt;summary&gt;</code>.</summary>
    <p>The remaining contents of the <code>&lt;details&gt;</code> tag can be any flow content, such as paragraphs, lists, images, etc.</p>
</details>

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 whitewell"

This text is in a well whitewell applied to a div.

Stats Well: class="well stats-well"

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