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
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
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
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.
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.
| 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.
| 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 |
|---|---|---|---|
[href$='.pdf'], [href$='.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-7700Example:
<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.
- Ordered and Unordered Lists
- Other List Layouts using Ordered & Unordered Lists
- Definition Lists
- 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)
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
Decimal Leading Zero ol.decimal-leading-zero
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
Lower Alpha ol.lower-alpha
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
Upper Alpha ol.upper-alpha
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
Lower Roman ol.lower-roman
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
Upper Roman ol.upper-roman
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- 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"
divWhite: class="well white-well"
This text is in a well white-well applied to a div.
Stats Well: class="well stats-well"
class="well stats-well" applied to a div.Table of Contents Well: class="well toc-well"
Table of Contents
- This text is in a
class="well toc-well"applied to adiv. - It requires an
H2for the Title and aulfor the list items - This should only contain anchor links to points further down the page. No external links in a Table of Contents Well.