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.
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.
Report Guide