Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

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
classcss propertyvalue
.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
a b 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
a b 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
a b 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
a b 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
a b 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
a b 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
a b 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
a b 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
a b 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
a b 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
a b 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
a b 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
a b 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
a b 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
a b 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
a b 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>
Copy Code