Source: dist/css/acc_uc.css, line 558

4.1 Font

Source: dist/css/acc_uc.css, line 1396

4.1.1 Font Size

Is Responsive: breakpoint modifiers

You can alter the size of the font with font_[x] test 1

class	css property	value
.font_0	font-size :	1rem 16px
.font_1	font-size :	1.125rem 18px
.font_2	font-size :	1.265625rem 20.25px
.font_3	font-size :	1.423828125rem 22.78125px
.font_4	font-size :	1.6018066406rem 25.62890625px
.font_5	font-size :	1.8020324707rem 28.8325195313px
.font_6	font-size :	2.0272865295rem 32.4365844727px
.font_7	font-size :	2.2806973457rem 36.4911575317px
.font_8	font-size :	2.565784514rem 41.0525522232px
.font_9	font-size :	2.8865075782rem 46.1841212511px
.font_10	font-size :	3.2473210255rem 51.9571364075px
.font_n1	font-size :	0.8888888889rem 14.2222222222px
.font_n2	font-size :	0.7901234568rem 12.6419753086px
.font_n3	font-size :	0.7023319616rem 11.2373113855px
.font_n4	font-size :	0.624295077rem 9.9887212315px
.font_n5	font-size :	0.5549289573rem 8.8788633169px

Example s

Default styling

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_10

10x

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_9

9x

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_8

8x

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_7

7x

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_6

6x

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_5

Largest

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_4

Large

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_3

Big

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_2

Big-ish

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_1

Slightly Bigger

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_0

Default Size

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_n1

Shrunk

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_n2

small

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_n3

smaller

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_n4

even smaller

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_n5

smallest

a b c d e f g h i j k l m n o p q r s t u v w x y z

<div class="[modifier class] font_normal">
  <div class="lowercase pre-wrap">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  <div class="uppercase pre-wrap">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
</div>

<div class="[modifier class] font_normal">
  <div class="lowercase pre-wrap">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  <div class="uppercase pre-wrap">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
</div>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 642

4.1.2 Font Color

You can change the color of the text with some simple use classes.

Example s

Default styling

a b c d e f g h i j k l m n o p q r s t u v w x y z

.c_white

text that's white

a b c d e f g h i j k l m n o p q r s t u v w x y z

.c_black

text that's black

a b c d e f g h i j k l m n o p q r s t u v w x y z

.c_primary

text that's primary

a b c d e f g h i j k l m n o p q r s t u v w x y z

.c_alert

text that's alert

a b c d e f g h i j k l m n o p q r s t u v w x y z

.c_info

text that's info

a b c d e f g h i j k l m n o p q r s t u v w x y z

.c_warning

text that's warning the user

a b c d e f g h i j k l m n o p q r s t u v w x y z

.c_inherit

text that inherits from its parent

a b c d e f g h i j k l m n o p q r s t u v w x y z

<div class="[modifier class] font_normal font_2 font_bold bg_shade-4 p_3">
  <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
</div>

<div class="[modifier class] font_normal font_2 font_bold bg_shade-4 p_3">
  <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
</div>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 1150

4.1.2.1 Font Color: Black & White

black and white fonts can be modified to have levels of transparency between 0-9.

Example s

Default styling

[modifier class]

a b c d e f g h i j k l m n o p q r s t u v w x y z

[modifier class]-0

a b c d e f g h i j k l m n o p q r s t u v w x y z

[modifier class]-1

a b c d e f g h i j k l m n o p q r s t u v w x y z

[modifier class]-2

a b c d e f g h i j k l m n o p q r s t u v w x y z

[modifier class]-3

a b c d e f g h i j k l m n o p q r s t u v w x y z

[modifier class]-4

a b c d e f g h i j k l m n o p q r s t u v w x y z

[modifier class]-5

a b c d e f g h i j k l m n o p q r s t u v w x y z

[modifier class]-6

a b c d e f g h i j k l m n o p q r s t u v w x y z

[modifier class]-7

a b c d e f g h i j k l m n o p q r s t u v w x y z

[modifier class]-8

a b c d e f g h i j k l m n o p q r s t u v w x y z

[modifier class]-9

a b c d e f g h i j k l m n o p q r s t u v w x y z

.c_white

text that's white

c_white

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_white-0

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_white-1

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_white-2

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_white-3

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_white-4

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_white-5

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_white-6

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_white-7

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_white-8

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_white-9

a b c d e f g h i j k l m n o p q r s t u v w x y z

.c_black

text that's black

c_black

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_black-0

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_black-1

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_black-2

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_black-3

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_black-4

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_black-5

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_black-6

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_black-7

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_black-8

a b c d e f g h i j k l m n o p q r s t u v w x y z

c_black-9

a b c d e f g h i j k l m n o p q r s t u v w x y z

<div class="font_normal font_2 bg_primary font_ui">
  <div class="[modifier class] p_3">
    <div class="font_3 font_bold">[modifier class] </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
    <div class="[modifier class]-0 p_3">
    <div class="font_3 font_bold">[modifier class]-0 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
    <div class="[modifier class]-1 p_3">
    <div class="font_3 font_bold">[modifier class]-1 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
    <div class="[modifier class]-2 p_3">
    <div class="font_3 font_bold">[modifier class]-2 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
    <div class="[modifier class]-3 p_3">
    <div class="font_3 font_bold">[modifier class]-3 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
    <div class="[modifier class]-4 p_3">
    <div class="font_3 font_bold">[modifier class]-4 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
    <div class="[modifier class]-5 p_3">
    <div class="font_3 font_bold">[modifier class]-5 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
    <div class="[modifier class]-9 p_3">
    <div class="font_3 font_bold">[modifier class]-6 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
      <div class="[modifier class]-7 p_3">
    <div class="font_3 font_bold">[modifier class]-7 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
      <div class="[modifier class]-8 p_3">
    <div class="font_3 font_bold">[modifier class]-8 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
      <div class="[modifier class]-9 p_3">
    <div class="font_3 font_bold">[modifier class]-9 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
</div>

<div class="font_normal font_2 bg_primary font_ui">
  <div class="[modifier class] p_3">
    <div class="font_3 font_bold">[modifier class] </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
    <div class="[modifier class]-0 p_3">
    <div class="font_3 font_bold">[modifier class]-0 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
    <div class="[modifier class]-1 p_3">
    <div class="font_3 font_bold">[modifier class]-1 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
    <div class="[modifier class]-2 p_3">
    <div class="font_3 font_bold">[modifier class]-2 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
    <div class="[modifier class]-3 p_3">
    <div class="font_3 font_bold">[modifier class]-3 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
    <div class="[modifier class]-4 p_3">
    <div class="font_3 font_bold">[modifier class]-4 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
    <div class="[modifier class]-5 p_3">
    <div class="font_3 font_bold">[modifier class]-5 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
    <div class="[modifier class]-9 p_3">
    <div class="font_3 font_bold">[modifier class]-6 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
      <div class="[modifier class]-7 p_3">
    <div class="font_3 font_bold">[modifier class]-7 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
      <div class="[modifier class]-8 p_3">
    <div class="font_3 font_bold">[modifier class]-8 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
      <div class="[modifier class]-9 p_3">
    <div class="font_3 font_bold">[modifier class]-9 </div>
    <div class="text-lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
    <div class="text-uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  </div>
</div>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 1339

4.1.3 Font Weight

You can change the features of the text with some simple use classes.

Example s

Default styling

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_light

Light, 100

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_regular

Regular, 300

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_medium

Medium, 500

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_bold

Bold, 700

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_xbold

Extra Bold, 900

a b c d e f g h i j k l m n o p q r s t u v w x y z

<div class="[modifier class] font_normal font_2 font_ui">
  <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  <div class="uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
</div>

<div class="[modifier class] font_normal font_2 font_ui">
  <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  <div class="uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
</div>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 583

4.1.4 Font Family

You can change the features of the text with some simple use classes.

Example s

Default styling

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_accent

Font Accent Used main Nav and Some headers

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_display

Font Display: Used in headlines, buttons,

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_copy

Font Normal: Used in content

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_ui

Font Normal: Used components like navs and dense ui elements

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_mono

Used is quotes or data or code

a b c d e f g h i j k l m n o p q r s t u v w x y z

<div class="[modifier class] font_3">
  <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  <div class="uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
</div>

<div class="[modifier class] font_3">
  <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  <div class="uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
</div>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 618

4.1.5 Font Style

You can change the features of the text with some simple use classes.

Example s

Default styling

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_normal

Sets font style to normal

a b c d e f g h i j k l m n o p q r s t u v w x y z

.font_italic

Sets font style to italic

a b c d e f g h i j k l m n o p q r s t u v w x y z

<div class="[modifier class] font_normal font_2">
  <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  <div class="uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
</div>

<div class="[modifier class] font_normal font_2">
  <div class="lowercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  <div class="uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
</div>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 565

4.2 Text

Source: dist/css/acc_uc.css, line 2034

Example s

Default styling

[modifier class]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.text_right

right alignment

text_right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.text_center

center alignment

text_center

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.text_left

left alignment

text_left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="font_normal font_1 p_3">
  <h3 class="font_2 font_bold c_shade_3 p-b_3 [modifier class]">[modifier class]</h3>
  <p class="[modifier class] lh_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="font_normal font_1 p_3">
  <h3 class="font_2 font_bold c_shade_3 p-b_3 [modifier class]">[modifier class]</h3>
  <p class="[modifier class] lh_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 1847

4.2.2 Text Decoration

Decoration can be easily added to text through these UCs.

Example s

Default styling

text has a decoration of [modifier class] I am a link also decorated

.underline

solid underline the text

text has a decoration of I am a link also decorated

.dotted

dotted underline the text

text has a decoration of I am a link also decorated

.double

double underline the text

text has a decoration of I am a link also decorated

.dashed

dashed underline the text

text has a decoration of I am a link also decorated

.undecorated

unset the decoration of the text

text has a decoration of I am a link also decorated

.uppercase

uppercase the text

text has a decoration of I am a link also decorated

.lowercase

lowercase the text

text has a decoration of I am a link also decorated

.capitalize

capitalize the text

text has a decoration of I am a link also decorated

<div class="[modifier class] p_3 br_solid font_bold br_black-1 br_1 bg bg_primary c_white">text has a decoration of [modifier class] <a>I am a link also decorated</a></div>

<div class="[modifier class] p_3 br_solid font_bold br_black-1 br_1 bg bg_primary c_white">text has a decoration of [modifier class] <a>I am a link also decorated</a></div>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 1940

4.2.3 Text Indent

Indent text needs to have a modifier to like `text-indent_2

Example s

Default styling

text that has no indent/p>

text that has an indent magnitude of [modifier class]

text-indent_n3

text-indent of negative 3 rem

text that has no indent/p>

text that has an indent magnitude of text-indent_n3

text-indent_n2

text-indent of negative 2 rem

text that has no indent/p>

text that has an indent magnitude of text-indent_n2

text-indent_n1

text-indent of negative 1 rem

text that has no indent/p>

text that has an indent magnitude of text-indent_n1

text-indent_0

text-indent of positive 0 rem

text that has no indent/p>

text that has an indent magnitude of text-indent_0

text-indent_1

text-indent of positive 1 rem

text that has no indent/p>

text that has an indent magnitude of text-indent_1

text-indent_2

text-indent of positive 2 rem

text that has no indent/p>

text that has an indent magnitude of text-indent_2

text-indent_3

text-indent of positive 3 rem

text that has no indent/p>

text that has an indent magnitude of text-indent_3

<div class="font_normal font_1 m-x_5 br_solid br-l_1 br_black-4">
<p class="">text that has no indent/p>
<p class="[modifier class]">text that has an indent magnitude of [modifier class] </p>
</div>

<div class="font_normal font_1 m-x_5 br_solid br-l_1 br_black-4">
<p class="">text that has no indent/p>
<p class="[modifier class]">text that has an indent magnitude of [modifier class] </p>
</div>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 1990

4.2.4 Line Height

Change the line height of text with lh_x.

Example s

Default styling

[modifier class]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.lh_0

0

lh_0

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.lh_1

1

lh_1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.lh_2

1.25

lh_2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.lh_3

1.45

lh_3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.lh_4

1.75

lh_4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.lh_5

2.5

lh_5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="font_normal font_1 p_3">
  <h3 class="font_2 font_bold c_shade_3 p-b_3">[modifier class]</h3>
  <p class="[modifier class]">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="font_normal font_1 p_3">
  <h3 class="font_2 font_bold c_shade_3 p-b_3">[modifier class]</h3>
  <p class="[modifier class]">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 1902

4.2.5 Text Shadows

Shadows can be easily added to text there is limited shadows black and white and negative black and white

Example s

Default styling

text has shadow of [modifier class]

.text-shadow_white-n1

inset white shadow

text has shadow of text-shadow_white-n1

.text-shadow_white-1

white shadow

text has shadow of text-shadow_white-1

.text-shadow_black-n1

inset black shadow

text has shadow of text-shadow_black-n1

.text-shadow_black-1

black shadow

text has shadow of text-shadow_black-1

.text-shadow_none

no shadow

text has shadow of text-shadow_none

<div class="[modifier class] p_3 br_solid font_bold br_black-1 br_1 bg bg_primary c_white">text has shadow of [modifier class]</div>

<div class="[modifier class] p_3 br_solid font_bold br_black-1 br_1 bg bg_primary c_white">text has shadow of [modifier class]</div>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 1728

4.2.6 Text Wrap

Is Responsive: breakpoint modifiers

You can alter the wrapping style with these UCs.

Example s

Default styling

Quae sapiente reprehenderit explicabo esse consequatur error fugiat. Voluptas odit ipsam architecto quae perspiciatis nostrum autem at. Ut veritatis molestiae distinctio autem repudiandae voluptatem voluptatibus aspernatur.

.wrap

alter the wrapping style to wrap

Quae sapiente reprehenderit explicabo esse consequatur error fugiat. Voluptas odit ipsam architecto quae perspiciatis nostrum autem at. Ut veritatis molestiae distinctio autem repudiandae voluptatem voluptatibus aspernatur.

.pre-wrap

alter the wrapping style to pre-wrap

Quae sapiente reprehenderit explicabo esse consequatur error fugiat. Voluptas odit ipsam architecto quae perspiciatis nostrum autem at. Ut veritatis molestiae distinctio autem repudiandae voluptatem voluptatibus aspernatur.

.nowrap

alter the wrapping style to nowrap

Quae sapiente reprehenderit explicabo esse consequatur error fugiat. Voluptas odit ipsam architecto quae perspiciatis nostrum autem at. Ut veritatis molestiae distinctio autem repudiandae voluptatem voluptatibus aspernatur.

<div class="[modifier class] font_normal max-w_30">
  Quae sapiente reprehenderit explicabo esse consequatur error fugiat. Voluptas odit ipsam architecto quae perspiciatis nostrum autem at. Ut veritatis molestiae distinctio autem repudiandae voluptatem voluptatibus aspernatur.
</div>

<div class="[modifier class] font_normal max-w_30">
  Quae sapiente reprehenderit explicabo esse consequatur error fugiat. Voluptas odit ipsam architecto quae perspiciatis nostrum autem at. Ut veritatis molestiae distinctio autem repudiandae voluptatem voluptatibus aspernatur.
</div>

Code Sample

Copy Code

This Documentation is Moved!

Typography

4.1 Font

4.1.1 Font Size

Example s

Default styling

.font_10

.font_9

.font_8

.font_7

.font_6

.font_5

.font_4

.font_3

.font_2

.font_1

.font_0

.font_n1

.font_n2

.font_n3

.font_n4

.font_n5

4.1.2 Font Color

Example s

Default styling

.c_white

.c_black

.c_primary

.c_alert

.c_info

.c_warning

.c_inherit

4.1.2.1 Font Color: Black & White

Example s

Default styling

.c_white

.c_black

4.1.3 Font Weight

Example s

Default styling

.font_light

.font_regular

.font_medium

.font_bold

.font_xbold

4.1.4 Font Family

Example s

Default styling

.font_accent

.font_display

.font_copy

.font_ui

.font_mono

4.1.5 Font Style

Example s

Default styling

.font_normal

.font_italic

4.2 Text

4.2.1 Alignment

Example s

Default styling

[modifier class]

.text_right

text_right

.text_center

text_center

.text_left

text_left

4.2.2 Text Decoration

Example s

Default styling

.underline

.dotted

.double

.dashed

.undecorated

.uppercase

.lowercase

.capitalize