Text Styles
Change the appearance of text. NCIDS uses Poppins Regular, Semibold, and Italics for headings. Semibold is used for Bold and Italics can be used for headings. Open Sans Regular and Bold are used for body text and in components.
Utility Modules
Font style
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.text-style | u-text(style) | @include u-text('italic')@include u-text('no-italic') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| font-style | False | None | 0.02 KB | 0.11 KB |
Class name
Estimated computed value
.text-italic
italic
The Celebrated Jumping Frog of Calaveras County
.text-no-italic
normal
The Celebrated Jumping Frog of Calaveras County
Font weight
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.text-weight | u-text(weight) | @include u-text('thin')@include u-text('normal')@include u-text(900) |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| font-weight | True | None | 0.1 KB | 0.54 KB |
Class name
Estimated computed value
.text-light
300
The Celebrated Jumping Frog of Calaveras County
.text-normal
400
The Celebrated Jumping Frog of Calaveras County
.text-bold
600
The Celebrated Jumping Frog of Calaveras County
Note: Bold changed from the default of 700 to 600.
Letterspacing
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.text-ls-value | u-text('ls-value') | @include u-text('ls-1')@include u-text('ls-auto')@include u-text('ls-neg-1') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| letter-spacing | False | None | 0.05 KB | 0.28 KB |
Class name
Estimated computed value
.text-ls-neg-3
-0.03em
The Celebrated Jumping Frog of Calaveras County
.text-ls-neg-2
-0.02em
The Celebrated Jumping Frog of Calaveras County
.text-ls-neg-1
-0.01em
The Celebrated Jumping Frog of Calaveras County
.text-ls-auto
initial
The Celebrated Jumping Frog of Calaveras County
.text-ls-1
0.025em
The Celebrated Jumping Frog of Calaveras County
.text-ls-2
0.1em
The Celebrated Jumping Frog of Calaveras County
.text-ls-3
0.15em
The Celebrated Jumping Frog of Calaveras County
Text decoration
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.text-decoration | u-text(decoration) | @include u-text('underline')@include u-text('strike')@include u-text('no-underline') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| text-decoration | False | hover | 0.06 KB | 0.32 KB |
Class name
Estimated computed value
.text-underline
underline
The Celebrated Jumping Frog of Calaveras County
.text-strike
line-through
The Celebrated Jumping Frog of Calaveras County
.text-no-strike
none
The Celebrated Jumping Frog of Calaveras County
.text-no-underline
none
The Celebrated Jumping Frog of Calaveras County
Text decoration color
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.underline-color | u-underline(color) | @include u-underline('red-50v') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| text-decoration-color | False | hover | 2.33 KB | 12.6 KB |
Class name
Hexadecimal Value
State colors
.underline-error-lighter.text-underline
#fde2ea
.underline-error-light.text-underline
#f27da2
.underline-error.text-underline
#e41154
.underline-error-dark.text-underline
#b60d43
.underline-error-darker.text-underline
#950b30
.underline-warning-lighter.text-underline
#fdf2bf
.underline-warning-light.text-underline
#ffe396
.underline-warning.text-underline
#ffbe2e
.underline-warning-dark.text-underline
#e5a000
.underline-warning-darker.text-underline
#936f38
.underline-success-lighter.text-underline
#dbf2f3
.underline-success-light.text-underline
#67e4e8
.underline-success.text-underline
#42979a
.underline-success-dark.text-underline
#338084
.underline-success-darker.text-underline
#206b6f
.underline-info-lighter.text-underline
#d4e7f2
.underline-info-light.text-underline
#99cae4
.underline-info.text-underline
#51b8f0
.underline-info-dark.text-underline
#2099df
.underline-info-darker.text-underline
#01679d
.underline-disabled-light.text-underline
#e6e6e6
.underline-disabled.text-underline
#c9c9c9
.underline-disabled-dark.text-underline
#adadad
.underline-emergency.text-underline
#b60d43
.underline-emergency-dark.text-underline
#700824
Theme colors
.underline-base-lightest.text-underline
#f0f0f0
.underline-base-lighter.text-underline
#dfe1e2
.underline-base-light.text-underline
#a9aeb1
.underline-base.text-underline
#71767a
.underline-base-dark.text-underline
#565c65
.underline-base-darker.text-underline
#3d4551
.underline-base-darkest.text-underline
#1b1b1b
.underline-ink.text-underline
#1b1b1b
.underline-primary-lighter.text-underline
#99cae4
.underline-primary-light.text-underline
#3395ca
.underline-primary.text-underline
#007bbd
.underline-primary-vivid.text-underline
#067cbc
.underline-primary-dark.text-underline
#004971
.underline-primary-darker.text-underline
#00314b
.underline-secondary-lighter.text-underline
#beebee
.underline-secondary-light.text-underline
#4bbfc6
.underline-secondary.text-underline
#298085
.underline-secondary-vivid.text-underline
#338084
.underline-secondary-dark.text-underline
#1e4c4f
.underline-secondary-darker.text-underline
#17373a
.underline-accent-cool-lighter.text-underline
#d7e5f4
.underline-accent-cool-light.text-underline
#92a9c8
.underline-accent-cool.text-underline
#5478ab
.underline-accent-cool-dark.text-underline
#284976
.underline-accent-cool-darker.text-underline
#06162d
.underline-accent-warm-lighter.text-underline
#fdf2bf
.underline-accent-warm-light.text-underline
#fee685
.underline-accent-warm.text-underline
#face00
.underline-accent-warm-dark.text-underline
#ddaa01
.underline-accent-warm-darker.text-underline
#b38c00
.underline-emergency.text-underline
#b60d43
.underline-emergency-dark.text-underline
#700824
Grayscale Palette
.underline-gray-5.text-underline
#f0f0f0
.underline-gray-10.text-underline
#e6e6e6
.underline-gray-30.text-underline
#adadad
.underline-gray-50.text-underline
#757575
.underline-gray-70.text-underline
#454545
.underline-gray-90.text-underline
#171717
Basic Palette
.underline-teal.text-underline
#298085
.underline-cerulean.text-underline
#007bbd
.underline-cranberry.text-underline
#bb0e3d
.underline-navy.text-underline
#14315c
.underline-golden.text-underline
#947100
Uppercase and lowercase
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.text-case | u-text(case) | @include u-text('uppercase')@include u-text('lowercase')@include u-text('no-uppercase') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| text-transform | False | None | 0.04 KB | 0.2 KB |
Class name
Estimated computed value
.text-uppercase
uppercase
The Celebrated Jumping Frog of Calaveras County
.text-lowercase
lowercase
The Celebrated Jumping Frog of Calaveras County
.text-no-uppercase
none
The Celebrated Jumping Frog of Calaveras County
.text-no-lowercase
none
The Celebrated Jumping Frog of Calaveras County
Vertical align
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.text-vertical-align | u-text(vertical-align) | @include u-text('baseline')@include u-text('sup')@include u-text('ttop') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| vertical-align | False | None | 0.06 KB | 0.32 KB |
Class name
Estimated computed value
.text-baseline
baseline
A line of text and text-baseline
.text-bottom
bottom
A line of text and text-bottom
.text-middle
middle
A line of text and text-middle
.text-sub
sub
A line of text and text-sub
.text-tbottom
text-bottom
A line of text and text-tbottom
.text-ttop
text-top
A line of text and text-ttop
.text-top
top
A line of text and text-top
Whitespace
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.text-white-space | u-text(white-space) | @include u-text('pre-line')@include u-text('no-wrap')@include u-text('wrap') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| whitespace | False | None | 0.04 KB | 0.2 KB |
Class name
Estimated computed value
.text-pre
pre
formatted line with multiple spaces
.text-pre-line
pre-line
formatted line with multiple spaces
.text-pre-wrap
pre-wrap
formatted line with multiple spaces
.text-wrap
wrap
formatted line with multiple spaces
.text-no-wrap
no-wrap
formatted line with multiple spaces