60kell

Basics
The button classes described here can be applied to any element, although typically would be applied to an element like a, input[type="submit"] or button so that the user can interact with it.
As a minimum, a button should receive the basic ipsButton class, plus a size class and a style class (explained below).
 
Button styles
ipsButton_normal
Normal button ipsButton_primary
Primary button ipsButton_alternate
Alternate button ipsButton_important
Important button ipsButton_light
Light button ipsButton_veryLight
Very light button ipsButton_overlaid
Overlaid button ipsButton_link
Link button  
Button sizes
ipsButton_medium
Medium button ipsButton_verySmall
Very small button ipsButton_small
Small button ipsButton_large
Large button ipsButton_veryLarge
Very large button ipsButton_fullWidth
Can be combined with another size, above.
Full width button  
Disabled buttons
Buttons can be visually disabled either by adding the class ipsButton_disabled, or, on relevant input elements, adding the disabled property. For example:
<a href='#' class='ipsButton ipsButton_normal ipsButton_medium ipsButton_disabled'>Disabled button (link)</a> <input type='submit' class='ipsButton ipsButton_normal ipsButton_medium' disabled value='Disabled button (input)'> These would render like so:
Disabled button (link)  
Split buttons
Split buttons allow you to create toolbars easily by specifying a list of buttons that display joined to each other.
They are created by specifying the class ipsButton_split on a wrapper element containing two or more buttons. The wrapper element can be a <ul> tag, or any other that makes sense for your use.
All of the buttons in a split button group should be the same size, otherwise results are unpredictable. Different styles can be used on each button, though.
<ul class='ipsButton_split'> <li><a href='#' class='ipsButton ipsButton_small ipsButton_primary'>Button 1</a></li> <li><a href='#' class='ipsButton ipsButton_small ipsButton_light'>Button 2</a></li> <li><a href='#' class='ipsButton ipsButton_small ipsButton_light'>Button 3</a></li> </ul> Button 1 Button 2 Button 3  

Description
The typography module offers a wide range of classes for styling text across the suite
 
Headings
A number of heading styles are provided, which can be used for structuring information on the page. They are element-agnostic; you can use them on any of the <h*> tags (or even other tags) - choose the most semantic element for your particular use.
ipsType_pageTitle
Most useful as the main title on a page. A larger version is available by also adding the ipsType_largeTitle class.
This is a page title
 
ipsType_sectionTitle
The title of a section on the page.
This is a section title
 
ipsType_sectionHead
A section heading.
This is a section heading
 
ipsType_minorHeading
A small, less-important heading.
A minor heading
 
Alignment
ipsType_left
Left-aligned text
ipsType_right
Right-aligned text
ipsType_center
Centered text
 
Colors
ipsType_light
Light text
ipsType_warning or ipsType_negative
Warning status text
ipsType_success
Success status text
ipsType_issue
Issue/intermediate status text
ipsType_neutral
Neutral status text
 
Sizing
ipsType_small
Small text
ipsType_medium
Medium text
ipsType_normal
Normal sizing
ipsType_large
Large text
ipsType_veryLarge
Very large text
ipsType_huge (useful for icons)
 
 
User-generated text/content from CKEditor
When dealing with content that is generated by users (generally coming from CKEditor), there are three classes that should be used in order to have it display correctly. Generally you will want to use all three although some situations may call for a different treatment. You may also want to apply the classes to different elements - for example, if you have repeating blocks of user content, the ipsContained class might be applied to a wrapper instead of each individual item. When dealing with user-generated content, be sure to test edge cases.
ipsType_richText
This is the main class for user-generated content, and enables styles such as responsive images and correct margins.
ipsType_break
This ensures words break correctly in user-generated content
ipsType_contained
This is a protective measure that ensures content cannot expand out of its given container.
 
Truncating text
Text can be truncated on a single line by adding two classes to an element: ipsTruncate ipsTruncate_line. In browsers that support it, this causes overflowing text to be hidden, and instead be replaced by ellipsis.
Note: This method is designed to work on short pieces of text on a single line, such as text on a button. It does not work effectively on multi-line strings; for those cases you should use the javascript-based ips.ui.truncate widget. It also sets the element to 100% width in order to work; you will need to manually set a width if you wish to overule this behavior.
This is a long string which won't quite fit on this button  
Other typography styles
ipsType_noBreak
Prevents text from wrapping
ipsType_reset
Removes margin (most useful for <h*> and <p> elements)
ipsType_unbold
Remove bold styling from text
ipsType_uppercase
Makes text uppercase
ipsType_blendLinks
When applied to either an element containing links or links themselves, causes the links to match surrounding text styles.