Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

DesignBase

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

3.1.1 Link Colors

Link colors in all of its states, default, hover, visited.

$link-color-light - #8cebda; Link Color light $link-color-light--hover - #e8fbf8; Link Color light--hover $link-color-light--visited - #84afa7; Link Color light--visited $link-color-dark - #126657; Link Color dark $link-color-dark--hover - #051f1a; Link Color dark--hover $link-color-dark--visited - #42665f; Link Color dark--visited

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

3.1.2 Link Colors: Light

Link colors of a lighter shade in all of its states, default, hover, visited. Typically used to enhance visibility on dark backgrounds.

  • #126657; Link Color dark

    $link-color-dark

  • #051f1a; Link Color dark--hover

    $link-color-dark--hover

  • #42665f; Link Color dark--visited

    $link-color-dark--visited

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

3.2 Logos

Logos in the design come in 4 variations the primary logo, the condensed logo, and alte version which are the reverse of primary and reversed. All logos are controled by the width and will maintain there aspect ratios to respond to the container they are in. For 508 compliance please place the brand name in the logo.

Example s

.logo_primary

Primary Logo great for desktop displays best used for when the logo can be taller then 80px.

logo_primary

.logo_primary-alt

Primary Logo reversed for dark background situations.

logo_primary-alt

.logo_condensed.max-w_15

Smaller Mobile Friendly Logo these logos and be readable between 40px to 80px in height.

logo_condensed max-w_15

.logo_primary-alt.max-w_15

Smaller Logo Reversed.

logo_primary-alt max-w_15 
<div class="[modifier class]" data-style="[modifier class]" >
	<span class="alt">[modifier class]</span>
</div>
Copy Code

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

3.3 Seals

Seals in the design come in 3 variations the default, small, and tiny. All Seals will maintain their aspect ratios and will respond to the container, but seals have a max width. For 508 compliance, please place the brand name in the seal.

Example s

.seal_normal

Full size seal great for desktop displays best used for when the seal can be taller then 100px.

seal_normal

.seal_small

Condensed size seal great for Tablet displays best used for when the seal is between 100px to 40px.

seal_small

.seal_tiny

Smallest of the seals best used for icons when seal is 40px and bellow

seal_tiny 
<div class="[modifier class] m_auto" data-style="[modifier class]">
	<span class="alt-text">[modifier class]</span>
</div>
Copy Code