Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

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

8.1.9 Shadows

Shadows can be easily added to container .shadow_{{modifier_class}}. You can add simple or rich shadows depending on the level of depth and details of the shadow needed for the UI.

Example s

.shadow_n5

inset shadow

shadow_n5

.shadow_n4

inset shadow

shadow_n4

.shadow_n3

inset shadow

shadow_n3

.shadow_n2

inset shadow

shadow_n2

.shadow_n1

inset shadow

shadow_n1

.shadow_0

no shadow

shadow_0

.shadow_1

box shadow

shadow_1

.shadow_2

box shadow

shadow_2

.shadow_3

box shadow

shadow_3

.shadow_4

box shadow

shadow_4

.shadow_5

box shadow

shadow_5

.shadow_bevel-light

Rich Shadow bevel-light

shadow_bevel-light

.shadow_bevel-bold

Rich Shadow bevel-bold

shadow_bevel-bold

.shadow_overlap-light

Rich Shadow overlap-light

shadow_overlap-light

.shadow_overlap-bold

Rich Shadow overlap-bold

shadow_overlap-bold

.shadow_emboss-light

Rich Shadow emboss-light

shadow_emboss-light

.shadow_emboss-bold

Rich Shadow emboss-bold

shadow_emboss-bold
<div class="[modifier class] bg-blend_overlay bg_primary-5 br_round lh_1 m_0 m_5:md p_4 p_5 text_center texture_light flex flex_column"><span class="flex_auto self_center">[modifier class]</span></div>
Copy Code