Components
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
Badge
Outline Badge
Badge
Pro Level Badge
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
Standard Sizes





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



Avatar with badge bronze

Avatar with badge silver

Avatar with badge gold

Avatar with badge 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
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 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:
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.
Highlights are used to highlight text for easily catching the users eye.
Example usage: class="highlight-info-light"
Example usage: class="highlight-info"
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"

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.
The standard IW dropdown uses three dots. Add .dropdown-toggle .dropdown-dots
to the div to use
this styling.
Dropdowns can be added to buttons as well:
Click meFor 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.
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
Example Select w/ Validation
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.
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:
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ MoreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+ More- 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
orsubtract-minutes
attributes
Working with DST (11/01/2020)
With iw-time-selector
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 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" />
).
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
.
Use the iw-select-all
attribute to configure checkbox input to act as a "select all" toggle for
other matching checkbox inputs
Banner can be used to display a prominent message
Example usage: class="banner"