The Cosmic theme now offers a set of class names that can be applied to text to give it a particular visual style.
Note: These features require your site to be using UO Core/Cosmic version 21.05 or newer.
Visit our Design and Layout page to learn why we limit our UO web fonts to United Sans Regular, United Serif Regular, and Source Sans Variable.
Text Size Classes
These text size classes can be useful when you need text to be visually larger (like a header style), but without changing the HTML tags that wrap an element. All text in the Cosmic theme is based off of these sizes, so if you ever need text to "look like" the text used in another component, you can simply apply one of these classes to your component to achieve the same font design.
Class Name | Example |
|---|---|
uo-text-size--xs | This is xs text. This is xs semibold text. This is xs bold text. |
uo-text-size--sm | This is sm text. This is sm semibold text. This is sm bold text. |
uo-text-size--rg | This is rg text. This is rg semibold text. This is rg bold text. |
uo-text-size--md | This is md text. This is md semibold text. This is md bold text. |
uo-text-size--lg | This is lg text. This is lg semibold text. This is lg bold text. |
uo-text-size--xl | This is xl text. This is xl semibold text. This is xl bold text. |
uo-text-size--2xl | This is 2xl text. This is 2xl semibold text. This is 2xl bold text. |
uo-text-size--3xl | This is 3xl text. This is 3xl semibold text. This is 3xl bold text. |
uo-text-size--4xl | This is 4xl text. This is 4xl semibold text. This is 4xl bold text. |
uo-text-size--5xl | This is 5xl text. This is 5xl semibold text. This is 5xl bold text. |
Fluid Text Size Classes
Each text size also includes a "fluid" version which will shrink down a bit on mobile to adapt better to the smaller screen size.
Class Name | Example |
|---|---|
uo-text-size-fluid--xs | This is fluid xs text. This is fluid xs semibold text. This is fluid xs bold text. |
uo-text-size-fluid--sm | This is fluid sm text. This is fluid sm semibold text. This is fluid sm bold text. |
uo-text-size-fluid--rg | This is fluid rg text. This is fluid rg semibold text. This is fluid rg bold text. |
uo-text-size-fluid--md | This is fluid md text. This is fluid md semibold text. This is fluid md bold text. |
uo-text-size-fluid--lg | This is fluid lg text. This is fluid lg semibold text. This is fluid lg bold text. |
uo-text-size-fluid--xl | This is fluid xl text. This is fluid xl semibold text. This is fluid xl bold text. |
uo-text-size-fluid--2xl | This is fluid 2xl text. This is fluid 2xl semibold text. This is fluid 2xl bold text. |
uo-text-size-fluid--3xl | This is fluid 3xl text. This is fluid 3xl semibold text. This is v3xl bold text. |
uo-text-size-fluid--4xl | This is fluid 4xl text. This is fluid 4xl semibold text. This is fluid 4xl bold text. |
uo-text-size-fluid--5xl | This is fluid 5xl text. This is fluid 5xl semibold text. This is fluid 5xl bold text. |
Header Text Style Classes
If you need the text to look like a header (h1-h6) tag, without using that tag (or to adjust text within one of those tags to look like another visually), you can use the following classes to make the text visually behave like a header.
Class Name | Example |
|---|---|
uo-text-header-1 | H1. Main Header |
uo-text-header-2 | H2. Header |
uo-text-header-3 | H3. Header |
uo-text-header-4 | H4. Header |
uo-text-header-5 | H5. Header |
uo-text-header-6 | H6. Header |
Fixed Size Header Text Style Classes
While the header styles are fluid by default, each header class also has an accompanying fixed variant if you do not want it to change size on smaller screens.
Class Name | Example |
|---|---|
uo-text-header-1--fixed | H1. Main Header (Fixed Size) |
uo-text-header-2--fixed | H2. Header (Fixed Size) |
uo-text-header-3--fixed | H3. Header (Fixed Size) |
uo-text-header-4--fixed | H4. Header (Fixed Size) |
uo-text-header-5--fixed | H5. Header (Fixed Size) |
uo-text-header-6--fixed | H6. Header (Fixed Size) |
Visit the Text page to learn about using headers to improve page layouts and increase accessibility.
Note: The 8.x-21.05 release of Cosmic/UO Core, used the incorrect font-family.
Text Weight Classes
There are several classes to adjust the weight of the text, from extra light, to bold, to heavy.
Class Name | Example |
|---|---|
uo-text-weight--ext-light | This is an example of Extra-Light text |
uo-text-weight--light | This is an example of Light text |
uo-text-weight--reg | (default weight) This is an example of the text weight |
uo-text-weight--semi | This is an example of Semi-Bold text |
uo-text-weight--med | This is an example of Medium text |
uo-text-weight--bold | This is an example of Bold text |
uo-text-weight--ext-bold | This is an example of Extra-Bold text |
uo-text-weight--heavy | This is an example of Heavy text |
Text Variants
If you need to adjust the style of a font to be italic (without wrapping it in an em tag), or if you need all-caps text visually, you can use the following styles. If you need text to NOT be italic, you can apply the uo-text-style--reg class to it if you need to override a default italic style.
Class Name | Example |
|---|---|
uo-text-style--italic | This is italic text |
uo-text-style--all-caps | This is all-caps text |
uo-text-style--title-case | This is title case text |
uo-text-style--reg | This is regular text (used to undo any text variants that exists) |
Font Family Overrides
If you have a context where you need text to be a particular font family type (serif, sans-serif, slab or slab sans-serif), you can apply the following classes to change the font display. This should be limited to use-cases when you need to adjust the font-family for a custom designed or tweaked element, and should NOT be used to change the font for a whole page or standard body copy.
Class Name | Example |
|---|---|
uo-text-font--serif | This is serif text (source serif) |
uo-text-font--sans | This is sans-serif text (source sans) |
uo-text-font--slab | This is slab text (united serif) |
uo-text-font--sans-united | This is slab sans-serif text (united sans) |
List Classes
Currently, we have one class which can be used to create an ordered list with more advanced numbering, such as 1.1, 1.2, for those list items. You can use the "increase indent" button to increase the "depth" count for the sub-bullet items.
List Class Name | Example |
|---|---|
<ol class="list-style--nested-numbers"> |
|
If you are looking for roman numeral list items, we do not currently have a class for that type of list, but you can use a style to add that appearance to your list items.