Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

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

7.8.2 Directional Position

Is Responsive: breakpoint modifiers
Quickly alter the position type and location of an object with top, bottom, left, and right position modifiers. All of these modifiers will follow the rules of the containers position type. All of the examples below are using absolute positions to have the greatest effect.

Example s

.t_1

modify top of an absolute positioned block

Position Absolute t_1

.t_5

modify top of an absolute positioned block

Position Absolute t_5

.b_1

modify bottom of an absolute positioned block

Position Absolute b_1

.b_5

modify bottom of an absolute positioned block

Position Absolute b_5

.r_5

modify left of an absolute positioned block

Position Absolute r_5

.l_5

modify right of an absolute positioned block

Position Absolute l_5
<div class=" br_solid br_transparent bg_accent-3 relative p_5" style="height:200px;">
	<div class="bg_primary-5 text_center absolute [modifier class]">Position Absolute [modifier class]</div>
</div>
Copy Code