Text and color

CDS includes many CSS classes to style text.

Code

(Classes are applicable to any tag)

<div class="{text-size} {text-color} {text-background-color} {text-border-color}"></div>

{text-size}

Offers built-in responsive support for text sizes. Remember that his also affects em values within any container that uses these classes.

Class	font-size	font-size (1024px-1199px)	font-size (1200px+)
Default (no class)	16px	18px	18px
.mini	14px	14px	14px
.small	15px	16px	16px
.medium	16px	16px	18px
.large	18px	20px	24px

{text-color}

Controls the color of any text within the element. Text color by default is assigned through the HTML tag used, these classes can be used to override those colors.

Light Mode

These options are applicable to a light background. "Light mode" is the default mode for all elements.

Class or Tag	Font color
Default (no class)	Assigned by HTML tag
<h1>, <h2>, <h3>, <h4>, <p>	User Agent Default (Usually #000000)
<h5>, <h6>	#444444
.base	#000000
.soft	#525252
.dim	#707070

Dark Mode

Dark mode is a setting for any element that can be enabled by adding the .dark class in conjunction with another class to control colors.

Class or Tag	Font color
.dark	#CDCDCD
<h1.dark>, <h2.dark>, <h3.dark>, <h4.dark>, <h5.dark>, <h6.dark>, <p.dark>	#F3F3F3
.dark.soft, .dark.dim	#A1A1A1

{text-background-color}

Changes the background color of the element.

{text-border-color}

The border color of the text block. This uses border-color, therefore it will not work as a way to add a stroke to the text itself.

Class	Border Color
.dim-border	#4B4B4B
.red-border	#CC4D4D