Text
Text ensures consistent text size, weight, line height and breaks across our products.
| Class | Scss Define | Compiled CSS |
|---|---|---|
u-x-small
|
font-size: pxToRem(12)!important;
|
font-size: 0.75rem!important;
|
u-small
|
font-size: pxToRem(14)!important;
|
font-size: 0.875rem!important;
|
u-medium
|
font-size: pxToRem(16)!important;
|
font-size: 1rem!important;
|
u-font-size-20
|
font-size: pxToRem(20)!important;
|
font-size: 1.25rem!important;
|
u-font-size-32
|
font-size: pxToRem(32)!important;
|
font-size: 2rem!important;
|
u-bold
|
font-weight: 600!important;
|
Stays the same |
u-normal
|
font-weight: normal!important;
|
Stays the same |
u-underline
|
text-decoration: underline!important;
|
Stays the same |
u-text-start
|
text-align: start!important;
|
Stays the same |
u-text-center
|
text-align: center!important;
|
Stays the same |
u-text-end
|
text-align: end!important;
|
Stays the same |
u-line-height-0-7
|
line-height: 0.7!important;
|
Stays the same |
u-line-height-1
|
line-height: 1!important;
|
Stays the same |
u-line-height-1-25
|
line-height: 1.25!important;
|
Stays the same |
u-line-height-1-5
|
line-height: 1.5!important;
|
Stays the same |
u-line-height-2
|
line-height: 2!important;
|
Stays the same |
u-break-word
|
@include break-word; white-space: initial;
|
Full browser fallbacks |
u-break-all
|
@include break-all; white-space: initial;
|
Full browser fallbacks |
u-trim
|
@include trim;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
||
overflow: hidden;
|
||
display: block;
|
||
u-trim-start
|
@include trim; direction:rtl; text-align:right;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
||
overflow: hidden;
|
||
display: block;
|
||
direction: rtl;
|
||
text-align: right;
|
||
u-trim-1
|
@include trim(1);
|
display: -webkit-box;
|
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
u-un-break-text
|
white-space: nowrap!important;
|
Stays the same |
u-capitalize
|
text-transform: capitalize!important;
|
Stays the same |
u-icon-small
|
font-size: var(--icon-size-small)!important;
|
Stays the same |
u-font-heading
|
font-family: var(--heading-font)!important;
|
Stays the same |
u-font-content
|
font-family: var(--content-font)!important;
|
Stays the same |
u-font-code
|
font-family: var(--code-font)!important;
|
Stays the same |
x-small
small
text
bold
<div>
<p class="text u-x-small">x-small</p>
<p class="text u-small">small</p>
<p class="text">text</p>
<p class="text u-bold">bold</p>
</div>