Components

Buttons

Buttons come in three sizes and two styles: regular and outline. Outline is typically used for secondary actions.

Small
Standard
Large
Indicator State
Extras
Button groups
Badges
Badge
Primary
Secondary
Warning
Success
Info
Danger
Outline Badge
Primary
Secondary
Warning
Success
Info
Danger
Badge
Primary
Secondary
Warning
Success
Info
Danger
Pro Level Badge
Bronze
Silver
Gold
Platinum
Progress bars
Pie fill by percent
Provide fill by percent

Pass the percentage as a style variable in the html mark up. Like so: style="--fill-percent:25;"

Example usage: class="pie pie-blue1 pie-md" style="--fill-percent:25;"

Colors

All bootstrap semantic colors are supported for fill color. Refer to the color palette for all possible colors.

Standard Sizes
Avatars

Standard Sizes

xxxxl, xxxl and xxl sizes (for banners and headers)

Avatar with badge bronze

bronze

Avatar with badge silver

silver

Avatar with badge gold

gold

Avatar with badge platinum

platinum

Avatar with ring bronze

Avatar with ring silver

Avatar with ring gold

Avatar with ring platinum

Avatar with shift-lead ring (only works for large sizes at the moment)

Default list

Overlapping list

Overlapping list with rings

Alerts & Toasts

The standard style of alerts should be used for in-line alerts on the page.

Toasts should be used for temporary notifications in response to an action. These appear in a fixed position, centered at the top of the page.

Tooltips

Tooltips should be used to show helpful explanations of features on hover. Most of the time, you should use the .icon .icon-help icon with tooltips. Try to only use text in a tooltip.

Tooltip on the top:

Tooltip on the right:

Tooltip on the bottom:

Tooltip on the left:

Popover

Popovers should be used to reveal extra information in the UI when clicked. Most of the time, you should use the .icon .icon-info icon with popovers. Popovers should generally be placed on top of the toggle.

Popover with text: Top:Right:Bottom:Left:

You can use HTML in the popover to format the information.

Popover with html:

Popovers are sometimes used for showing tutorials/help info to users. Use a custom template with class .popover-info in these cases.

Top:Right:Bottom:Left:

Make your popover wider by using a custom template with the class .popover-wide.

Wide info popover:Wide popover:

Additionally popovers that supply a template (using the data-template attribute) can be used to manually close the popover.This should be used with data-trigger="manual", and

Popover with close cross:

This example targets a specific popover.


                
Carousel
Highlights

Highlights are used to highlight text for easily catching the users eye.

Example usage: class="highlight-info-light"

Highlighted text with blue-10 as background and blue-50 as text color.
Highlighted text with purple-10 as background and purple-50 as text color.
Highlighted text with yellow-10 as background and yellow-50 as text color.
Highlighted text with green-10 as background and green-50 as text color.

Example usage: class="highlight-info"

Highlighted text with blue-50 as background and blue-10 as text color.
Highlighted text with purple-50 as background and purple-10 as text color.
Highlighted text with yellow-50 as background and yellow-10 as text color.
Highlighted text with green-50 as background and green-10 as text color.

Tags / Chips

Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.

Example usage: class="chip chip-primary"

Simple Tag
Primary
Warning
With Badge
5

Navigation

Use breadcrumbs for multi-step UIs.

Use tab navigation for horizontal navigation at desktop sizes

Use list groups for a vertical stack of links. List group items can be active or disabled.

Dropdowns

The standard IW dropdown uses three dots. Add .dropdown-toggle .dropdown-dots to the div to use this styling.

Forms

Please use a valid email.
Please use a valid email.
Please use a valid email.
Please use a valid email.
Please select a valid location.
Please select a valid number.
Please choose an option.



For select boxes, the design system comes with support for the select2 jQuery plugin. When initializing the Select2 plugin, just add code theme: 'bootstrap4'. Be sure to include the JS and CSS for Select2.


For ratings selection, the design system comes with support for thejQuery barrating plugin. Just wrap the input element in a div with.custom-stars, and initialize the plugin with the'css-stars' theme.

Form Floating

Add floating labels to .custom-select and input.form-control with the .form-floating class. Do note the label needs to follow the select or input element since this is a pure css implementation that uses the css sibling selector.

Text Input
Form select

Example Input Field w/ Validation
Please enter a valid email.
Example Select w/ Validation
Please select a valid number.
Modals

Generally, don't add the .fade class to the modal container. Always add .modal-dialog-centered to .modal-dialog, to ensure the modal appears vertically centered on the page.

Collapsible text

To hide/show long blocks of text, use Bootstrap's standard Collapse component, with an added class of collapse-text. In the toggling button, use elements with classes expanded and collapsed to change the label based on the collapsed state of the text. This functionality must be activated by running collapseText() on the jQuery elements.

Example:
Time input
Prefilled values
Placeholders
Disabled state
default
show-disabled-value
empty / starts disabled
No starting value or placeholder
Time selector
Time ranges
  • Calculate the duration of a time range by adding the iw-time-range attribute to an element
  • Display the value, diff, and other information from the time range inputs using an iw-time-range-display element
  • Optionally add or subtract "extra" minutes by specifying selectors for numeric inputs in the add-minutes or subtract-minutes attributes
mins

Working with DST (11/01/2020)

With iw-time-selector

Sized inputs

Use .form-control-sized with <input size="SIZE_HERE" /> to set control size based on the number of characters. .form-control-sized works with size values between 1 and 10 inclusive.

Note: By default, <input size="SIZE_HERE" /> does not set the same width across browsers. .form-control-sized overrides this behavior to set an explicit width based on the character width of the input. See the documentation for ch for more info.

Nested input

Nested inputs allow input controls to use the appearance of a normal form control while including content other than the actual <input> element.

Use <iw-nested-input class="form-control"> to enable nested input.

Add .form-control-no-spinner to hide the native spinner on number inputs (<input type="number" />).

Nested

mins

Nested + No spinner

mins

Sized + Nested

mins

Sized + Nested + No spinner

mins

With data-disabled-placeholder="-"

Nested

mins

Nested + No spinner

mins
Other fields

Use the iw-other-field attribute to configure a text field to be shown when selecting the "other" option from a <select> input.

To avoid DOM flashing before the jQuery plugin script can initialize, be sure to set the "other" text input's style to display:none.

Default "other" value

Use iw-other-field-value to specify the "other" value if it is something besides other.

Select all

Use the iw-select-all attribute to configure checkbox input to act as a "select all" toggle for other matching checkbox inputs


Banner

Banner can be used to display a prominent message

Example usage: class="banner"