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

1.1 Font

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

1.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

.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 969

1.1.2 Font Color

Using these straightforward utility classes, you can adjust the color of your text.

Example s

.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 1477

1.1.2.1 Font Color: Black & White

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

Example s

.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

NOTE:

It's important to note that, unlike other text colors, these colors are transparent. If you're aiming for grey, opaque text, you should use the .shade_(n) utility class.

<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 805

1.1.3 Font Weight

These classes are examples of CSS styles that operate as utility classes to control font weight across various text elements.

Example s

.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 854

1.1.4 Font Family

You can modify the font family used in your text elements with these simple utility classe.

Example s

.font_accent

Font Accent: Primarily used in main navigation elements and certain 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: Employed in headlines and 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 Copy: Typically used in content text.

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 UI: Applied to components like navigation elements and dense user interface 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

Font Mono: This is commonly used in quotations, data displays, or code snippets

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 945

1.1.5 Font Style

These utility classes allow you to adjust the style of your text:

Example s

.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 787

1.2 Text

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

Example s

.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 2062

1.2.2 Text Decoration

Decoration can be easily added to text through these UCs.

Example s

.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 2155

1.2.3 Text Indent

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

Example s

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 2205

1.2.4 Line Height

Change the line height of text with lh_x.

Example s

.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 2117

1.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

.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 1955

1.2.6 Text Wrap

Is Responsive: breakpoint modifiers

You can alter the wrapping style with these UCs.

Example s

.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

Typography

1.1 Font

1.1.1 Font Size

Example s

.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

1.1.2 Font Color

Example s

.c_white

.c_black

.c_primary

.c_alert

.c_info

.c_warning

.c_inherit

1.1.2.1 Font Color: Black & White

Example s

.c_white

.c_black

NOTE:

1.1.3 Font Weight

Example s

.font_light

.font_regular

.font_medium

.font_bold

.font_xbold

1.1.4 Font Family

Example s

.font_accent

.font_display

.font_copy

.font_ui

.font_mono

1.1.5 Font Style

Example s

.font_normal

.font_italic

1.2 Text

1.2.1 Alignment

Example s

.text_right

text_right

.text_center

text_center

.text_left

text_left

1.2.2 Text Decoration

Example s

.underline

.dotted

.double

.dashed

.undecorated

.uppercase

.lowercase

.capitalize

1.2.3 Text Indent

Example s

text-indent_n3

text-indent_n2

text-indent_n1

text-indent_0

text-indent_1

text-indent_2

text-indent_3