Components

Animations

Badges

Boxes

Boxes typically contain a small amount of information that needs to stand apart from neighboring content. Boxes can be used inside of another container, such as a .tile, or stand alone on the page with a shadow.

Box

Left Cap Box

Buttons [ Patterns ]

UW Credit Union's button styles can be applied to <a> and <button> elements.

Filters & Local Nav [ Patterns ]

Filter

Use for filtering the content on a page. Use with or without a title.

Local Nav

Use for local navigation across a set of pages.

Icons

Accessibility with Icons

When using any icons from the list below make sure to use the proper accessibility markup to optimize the element for screen readers.

Guidelines

• If the icon acts as a button but is not within a <button></button> tag, include role="button" on the clickable element.
• If your icon is within a button and it does not have a button label or additional label context within the markup, include a span with .screen-reader-only class to contain descriptive information.
• If the icon is decoration only and no context is needed from a screen reader, include aria-hidden="true" on the icon tag.

Example code of an icon that is a button with no helper text:

Icon Links

Icon Sizes

Icon Positions

Labels

To ensure accessibility, every input must have a corresponding label.

Only use a prepended input for a date field with an associated popup calendar when selecting a date near today's date, such as Transfer Date. Otherwise, use a plain text input without a popup calendar for selecting a date far from today's date, such as Date of Birth or ID Issue Date.

Select Lists

UW Credit Union uses a custom control for select lists. The control works like an HTML select on MD+ screens, and pops up in an overlay on XS/SM screens. Unlike a standard HTMl <select>, HTML content can be included in each option.

Single Select List with Groups

The Select List with Groupings uses a third party javascript solution called Select2 to handle this type of select list. Use this only when you want selects with <optgroup>. Use the UWCU select list for all other select lists.

Multi-Select List

The Multi-Select List uses a third party javascript solution called Select2 to handle this type of select list. Use this only when you want to the user to be allowed to select more than one option . This can be used with groups <optgroup> or without. Use the UWCU select list for all other select lists. An example can be found in Web Branch travel plans.

Text Area

UW Credit Union uses the standard browser input for text areas.

Scroll Box

UW Credit Union uses read only text areas to display prefilled information (such as a long agreement to terms), which scroll via mouse or gesture.

Checkboxes

UW Credit Union uses a custom control to replace the standard browser input for radio buttons. This ensures the radio button will be large enough to tap on mobile devices.

Radio Buttons

UW Credit Union uses a custom control to replace the standard browser input for checkboxes. This ensures the checkbox will be large enough to tap on mobile devices and gives us the ability to present a checkbox in a half-checked state.

Use the .input-group_option-wrapper along with .input-group_description to create a radio list with boxed items. Or use .input-group_option-wrapper without a description for simple boxed radio items.

Input with Suggestions

Edit Inline

Items & Lists [ Item Patterns List Patterns]

Link Areas [ Item Patterns | List Patterns ]

Progress Bar

Use this progress bar to present feedback to the user during time-consuming operations, such as uploading an image. This is used in conjunction with some javascript that animates the bar across until the upload is complete.

Progress Circle

Use the progress circle to show the user progress toward a goal.

Accessibility: Axe DevTools will flag this as not passing contrast and needs review because "Element's background color could not be determined due to a pseudo element". This might be because Chrome says the puesdo class CSS Variable background color isn't defined (bug?). These have been checked manually and pass contrast.

Future: Check to see where we are still using these. Can we eliminate some of these? Can we not use a psuedo element?

Progress Simple

Use this simple progress bar to show the progress through a simple workflow. This was designed to take up less vertical space than other progress components in order to have a better mobile experience. This might not work well for long or complicated workflows where you need more detail.

• We use the .progress-simple as a wrapper to indicate the max value of the progress bar.
• We use the inner .progress-simple_bar to indicate the progress so far.
• The .progress-simple_bar requires an inline style to set their width.
• The .progress-simple_bar also requires some role and aria attributes to make it accessible.

Progress Steps

Use the step progress to show the users linear progress toward a goal.

Accessibility Requirements: Every progress bar requires role="progressbar" and some aria values, like min, max, the current value, label and value text aria-label="Progress Steps" aria-valuetext="Step 1: Getting Started" aria-valuenow="1" aria-valuemin="1" aria-valuemax="3". The screenreader should read this "Progress Bar Step 1, Getting to know You".

Update: From axe Dev tools: ul or ol (ordered or unordered list) element cannot be role="progressbar".

Accessibility: Steps in the future do not pass contrast but WCAG 2.0 says it doesn't need to. It is considered "incidental" text. But accessibility best practices say it needs to have aria-disabled="true". "The aria-disabled state indicates that the element is perceivable but disabled, so it is not editable or otherwise operable."

WebAIM Contrast Aria Disabled

Ribbons

Favorite Ribbon [ Patterns ]

A favorite ribbon is used to denote a Favorite Account. A favorite ribbon can be placed in any container that implements the .has-ribbon class.

Basic Spinner

UWCU Leaf Spinner

Loading...

Tiles [Patterns: Items, Lists ]

Tiles are used to group sections of content on a page. Tiles should stand alone against the background of the page and should usually not be nested inside another tile, box or other styled container.

Basic Tile

Timeline [Patterns: Timeline Patterns ]

Toggles [ Patterns ]

UW Credit Union uses toggles as follows:

• Toggles are used to perform an action when there are 2 choices.
• For example, use a toggle to turn a setting on or off. (Note: The action should happen right away. No need to press another button to save the choice.) Use a toggle to show/hide a section of a form/page.
• One of the choices should always be selected by default. You should never see a toggle with both choices unselected.
• A toggle should not fire validation. Both choices should be valid.

Currency

At larger sizes, currency is presented in a stylized format.

Note: Screen readers cannot accurately read this stylized format out loud, so an additional element with the dollar amount in plain text must be included, such as <span class="screen-reader-only>$100.00><span>. The element with stylized currency must be hidden from screen readers with the aria-hidden="true" attribute.

Dates

At smaller sizes, dates are presented in all caps for better readability. At larger sizes, dates are presented in a stylized format.

Mini Labels [ Label/Value Pair Patterns ]

UW Credit Union uses a small label for label/value pairs and for list headings.

Mini Headings [ List Patterns ]

UW Credit Union uses a small heading for lists when the prominence of the title should be reduced.