Jump to content

Guides

Typography

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


×