Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

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

7.8.1 Inset

Is Responsive: breakpoint modifiers
The "inset" CSS property allows you to specify the positioning of an element's four edges within its containing element. It provides a convenient shorthand for defining the values of "top," "right," "bottom," and "left" properties simultaneously. By using the "inset" property, you can easily control the placement of an element without the need to specify each edge individually.

Example s

.inset_auto

modify inset of an absolute positioned block

Position Absolute inset_auto

.inset_0

modify inset of an absolute positioned block

Position Absolute inset_0

.inset_3

modify inset of an absolute positioned block

Position Absolute inset_3

.inset_5

modify inset of an absolute positioned block

Position Absolute inset_5

.inset_n3

modify inset of an absolute positioned block

Position Absolute inset_n3

.inset_n5

modify inset of an absolute positioned block

Position Absolute inset_n5
NOTE:
The ".inset_x" CSS class has lower specificity in the cascade, enabling a corresponding directional class to override its positioning at that specific responsive layer. 
<div class=" br_solid br_black br_1 bg_accent-3 relative p_5" style="height:200px;">
	<div class="bg_white-5 m_auto text_center absolute [modifier class] opacity_5 br_solid br_black-5 br_1">Position Absolute [modifier class]</div>
</div>
Copy Code