The typography module offers a wide range of classes for styling text across the suite
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.
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
The title of a section on the page.
This is a section title
A section heading.
This is a section heading
A small, less-important heading.
A minor heading
ipsType_warning or ipsType_negative
Warning status text
Success status text
Issue/intermediate status text
Neutral status text
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.
This is the main class for user-generated content, and enables styles such as responsive images and correct margins.
This ensures words break correctly in user-generated content
This is a protective measure that ensures content cannot expand out of its given container.
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.
Other typography styles
Prevents text from wrapping
Removes margin (most useful for <h*> and <p> elements)
Remove bold styling from text
Makes text uppercase
When applied to either an element containing links or links themselves, causes the links to match surrounding text styles.