Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

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