dropdownChoose a category here
Operational Excellence & Risk Management UI pattern library
This document contains templates, styles. It provides guidelines for visual design and production specifications of the user interfaces.

Article / Paragraph

This is H1 header

This is H2 header

This is H3 header

This is H4 header

This is the subheader

This is H5 header

This is H6 header

What is Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Button / Input / Radio & Checkbox

Close Primary button style Secondary button style
Left joint button Central joint button Right joint button
Primary large button Secondary large button
Search Disabled button style
Display:
Display: Check box label Radio button label
Standard lists Custom lists Compliance lists

Browse

Forms

1. Labels with fixed width

Labels automatically wrap

This should be our number 1 choice, but if most labels are long enough to wrap into more than 3 lines, we should choose option 3.

This is the error message after user submits the from
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Browse
  Submit Cancel
 
This is the error message after user submits the from
2. Labels without wrapping

Not suitable for long labels, all labels have a maximum width: 160px

This is the error message after user submits the from
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
  Submit Cancel
 
This is the error message after user submits the from
3. Long labels

When most labels are long enough to wrap into more than 3 lines

Created at corporate - Yes http in URL and param ON - Param name TEST:
CREATED AT SITE - Performs a Parameterized Search ON - YES Parameter Name - Global ON:
4. When a button gets cut off

Option 1: Replacing cutoff texts with ellipsis
Option 2: Simplify the word on the button, Only if the label has not been translated to other languages yet.A fixed width needs to be given to the button
Option 3: Icon + Tooltip

If the label on the button is super long
Search
  Submit Cancel

Tableless forms

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Submit Cancel

Message

Your application has been successfully submitted.

You may Back to home or Continue editting.

Hey! Sample error message style.
Hey! Sample hight message style.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Your application has been successfully submitted.
Opps! Something just went wrong.

Tabs

001 What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

001 What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Tool tip

This is a plug-in from the third party. Please be aware of the copyright.

TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.

TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. It's also only 3.5kb minified!

Mouse hover each element below to see the tiptip

class="tiptip" title="This is watermark text"
Tooltips in table column header
This label is truncated sort Short label sort Full view label sort Double-Attachments sort Actions
TipTip is a very lightweight and intelligent custom tooltip jQuery plugin TipTip is a very lightweight and intelligent custom tooltip jQuery plugin
Tooltips in table label

Grids / Pagination

Compact grid

If space allows, always try to increase the column width to accommodate the labels

In the compact grid, the width of the column with header needs to be wider than 60px.

Add a new item
More optionsdropdown
Search criteriadropdown
Displaying 1 - 25 of 428 records.
Common name goes here sort Accessibility sort Entity access profile sort Cyber user sort  
AACA admin1 Contrary to popular belief Yes
Air_EmissDataEntry 7659820546 The standard chunk of Lorem Ipsum Yes
Addupdate Falconer classical Latin literature from 45 BC No
AACA admin1 Contrary to popular belief Yes
Air_EmissDataEntry 7659820546 The standard chunk of Lorem Ipsum Yes
Addupdate Falconer classical Latin literature from 45 BC No
AACA admin1 Contrary to popular belief Yes
AACA admin2 Contrary to popular belief Yes
AACA admin1 Contrary to popular belief Yes
AACA admin3 Contrary to popular belief Yes
Standard grid

In the standard grid, the width of the column with header needs to be wider than 70px.

Add a new item
More optionsdropdown
Search criteriadropdown
Common name goes here sort Accessibility sort Entity access profile sort Cyber user sort  
AACA admin1 Contrary to popular belief Yes
Air_EmissDataEntry 7659820546 The standard chunk of Lorem Ipsum Yes
Addupdate Falconer classical Latin literature from 45 BC No
AACA admin1 Contrary to popular belief Yes
Air_EmissDataEntry 7659820546 The standard chunk of Lorem Ipsum Yes
Addupdate Falconer classical Latin literature from 45 BC No
AACA admin1 Contrary to popular belief Yes
AACA admin2 Contrary to popular belief Yes
AACA admin1 Contrary to popular belief Yes
AACA admin3 Contrary to popular belief Yes

Calendar

January 20, 2013
Su Mo Tu We Th Fr Sa
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 20 21 22
23 24 25 26 27 28 29
30 31

Responsive column

Click on the Search button to search on an Ingredient's Name or CAS Number, or click the first letter of the Ingredient Name.

Click on the Search button to search on an Ingredient's Name or CAS Number, or click the first letter of the Ingredient Name.

Click on the Search button to search on an Ingredient's Name or CAS Number, or click the first letter of the Ingredient Name.

Click on the Search button to search on an Ingredient's Name or CAS Number, or click the first letter of the Ingredient Name.

Click on the Search button to search on an Ingredient's Name or CAS Number, or click the first letter of the Ingredient Name.

Click on the Search button to search on an Ingredient's Name or CAS Number, or click the first letter of the Ingredient Name.

This is a responsive column

This is a responsive column

This is a responsive column

This is a responsive column

This is a responsive column

This is a responsive column

This is a responsive column

This is a responsive column

This is a responsive column

This is a responsive column

This is a responsive column

This is a responsive column

Popup layers

Popup trigger
Popup over popup
Parent popup trigger

Accordion

Expand all Hide all
Global viewing stations
  • (Global Site Viewing Station)
IHS global technical support
  • IHSTech (IHS Technical Support)
Global site administrators
  • Admin (Global Site Administrator)
  • aputey (Arthur Putey)
  • jdoe (Jane Doe)
  • Tester (Vitaliy Yaremko)
  • tpeterson (Teri Peterson)
Global site administrators
  • Admin (Global Site Administrator)
  • aputey (Arthur Putey)
  • jdoe (Jane Doe)
  • Tester (Vitaliy Yaremko)
  • tpeterson (Teri Peterson)
NFPA Hazard Ratings
NFPA
1
00
Health: Materials which on exposure under fire conditions would offer no hazard beyond that of ordinary combustible materials.
Flammability: Materials that must be preheated before ignition will occur. Water may cause frothing if it gets below the surface of the liquid and turns to steam. However, water fog gently applied to the surface will cause a frothing that will extinguish the fire.
Reactivity: Materials that (in themselves) are normally stable even under fire exposure conditions and that are not reactive with water. Normal firefighting procedures may be used.
Specific Hazard:
HMIS Hazard Ratings
HMIS
Health0
Flammability1
Reactivity0
PPEF 
Health: No significant risk to health.
Flammability: Materials that must be preheated before ignition will occur. Includes liquids, solids and semi solids having a flash point above 200 DEG F. (Class IIIB).
Reactivity: Normally stable, even under fire exposure conditions, and are not reactive with water.
Specific Hazard: Safety Glasses, Gloves, Protective Apron, Dust Respirator
Australian Dangerous Goods (ADG)
Australian Dangerous Goods (ADG)
    Code/IconShort DescriptionLong Description
1.1
Explosive * 1Substances and articles which have a mass explosion hazard
GHS Pictograms (GHS-P)
GHS Pictograms (GHS-P)
        IconShort DescriptionLong Description
CorrosionCorrosion
Exclamation MarkExclamation Mark
EnvironmentEnvironment

Loading animation

loading

Processing...