Text

The text utility provides styles to change the alignment, colors, fonts, opacity, or transformation of text.

Alignment

Aligning text shifts its horizontal layout. To change the alignment of text, use the .cwf-text--$ class structure, where $ is either left, center, right, or justify.

Colors

Changing the color of text can convey different meanings or contexts about the message. Colored text changes the color of the text to one of 4 accent colors. To change the color of text, use the .cwf-text--* class structure, where * is either success (green), info (blue), warning (orange), or danger (red). In T4, highlight the text and select Format -> Formats and then select either t4_text-success, t4_text-info, t4_text-warning, or t4_text-danger.

Accessibility considerations

Text colors are only color contrast compliant on white or very light gray backgrounds. Do not use text colors in accented cards or notifications, and consider only using them sparingly and within the main column of content.

Fonts

Changing the font of text can also convery different meanings or contexts about the message. To change the font of text, use the .cwf-text--& class structure, where & is either sans-serif (Roboto) or serif (Merriweather).

Considerations

Changing the font of text will only be visible if it's the opposite of the global font theme. For example, if globally your font is set to sans-serif (or Roboto), then .cwf-text--serif (Merriweather) will be the only font utility to visibly change the font.

Muted

Muted text drops its opacity to 75% opacity, appearing gray for black text on a white background. To mute (or lower the opacity of) of text, use the .cwf-text--muted class. In T4, highlight the text and select Format -> Formats -> t4_text-muted.

Transform

Transforming text makes it appear different than how it is structured, such as making it all lowercase, all uppercase, or capitalizing every word. To transform text, use the .cwf-text--% class structure, where % is either lowercase, uppercase, or capitalize. In T4, highlight the text and select Format -> Formats and then select either t4_text-lowercase, t4_text-uppercase, or t4_text-capitalize.

Accessibility considerations

Uppercase text can be hard to read for some users and it is not advised to overuse this. If your trying to make text feel more important, consider bolding it or changing its color instead.

Examples

Alignment

I'm a paragraph aligned left (.cwf-text--left).

I'm a paragraph center aligned (.cwf-text--center).

I'm a paragraph aligned right (.cwf-text--right).

I'm a justified paragraph (.cwf-text--justify).

Colors

I'm a success message (.cwf-text--success)!

I'm an informational paragraph (.cwf-text--info).

I'm a warning message (.cwf-text--warning)!

I'm a danger message (.cwf-text--danger)!

Fonts

I'm a sans-serif paragraph (.cwf-text--sans-serif).

I'm a serif paragraph (.cwf-text--serif).

Muted

I'm a muted paragraph (.cwf-text--muted).

Transform

I'm a lowercase paragraph (.cwf-text--lowercase).

I'm an uppercase paragraph (.cwf-text--uppercase).

I'm a capitalized paragraph (.cwf-text--capitalize).