This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/virtual_boot.css, line 7858

12.1.3 Unsafe Area

Description: Because the UI is floats on top of the images there are area that are unsafe to contain text.

<div class="relative m-t_4 overflow-hidden" style="width:1400px">
<div class="absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4">
    <div class="bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light">
        <span class="font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3">User Name</span>
        <a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white  h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Log Out <i class="fas fa-sign-out p-l_2"></i></a>
    </div>
</div><div class="absolute b_0 bg_alert font_5 font_xbold grid justify_center opacity_5 r_0 self_center t_0 text_center" style="width:250px"><span class="self_center c_black font-blend_color-burn">UNSAFE</span></div>
	<img
		class="w_100"
		src="https://via.placeholder.com/1440x200.png?text=Desktop+Large+1440x200"
	/>
</div>
<div class="relative m-t_4  overflow-hidden" style="width:1200px">
 <div class="absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4">
     <div class="bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light">
         <span class="font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3">User Name</span>
         <a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white  h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Log Out <i class="fas fa-sign-out p-l_2"></i></a>
     </div>
 </div><div class="absolute b_0 bg_alert font_5 font_xbold grid justify_center opacity_5 r_0 self_center t_0 text_center" style="width:250px"><span class="self_center c_black font-blend_color-burn">UNSAFE</span></div>
	<img
		class="w_100"
		src="https://via.placeholder.com/1200x200.png?text=Desktop+1200x200"
	/>
</div>
<div class="relative m-t_4  overflow-hidden" style="width:768px">
 <div class="absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4">
     <div class="bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light">
         <span class="font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3">User Name</span>
         <a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white  h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Log Out <i class="fas fa-sign-out p-l_2"></i></a>
     </div>
 </div><div class="absolute b_0 bg_alert font_5 font_xbold grid justify_center opacity_5 r_0 self_center t_0 text_center" style="width:250px"><span class="self_center c_black font-blend_color-burn">UNSAFE</span></div>
	<img
		class="w_100"
		src="https://via.placeholder.com/768x200.png?text=Tablet+768x200"
	/>
</div>
<div class="relative m-t_4  overflow-hidden"  style="width:600px">
<div class="absolute r_4 l_auto b_4 t_auto justify_center flex flex_column gap-x_4 gap-y_4">
     <div class="bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light">
         <span class="font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3">User Name</span>
         <a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white  h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Log Out <i class="fas fa-sign-out p-l_2"></i></a>
     </div>
 </div>
<div class="absolute b_0 bg_alert font_5 font_xbold grid justify_center opacity_5 r_0 self_center l_0 text_center" style="height:100px"><span class="self_center c_black font-blend_color-burn">UNSAFE</span></div>
	<img
		class="w_100"
		src="https://via.placeholder.com/600x250.png?text=Mobile+600x250"
	/>
</div>
<div class="relative m-t_4  overflow-hidden" style="width:400px">
<div class="absolute b_4 r_4 l_4 justify_center flex flex_row flex_column gap-x_4 gap-y_4">
     <div class="bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light">
         <span class="font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3">User Name</span>
         <a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white  h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Log Out <i class="fas fa-sign-out p-l_2"></i></a>
     </div>
 </div>
<div class="absolute b_0 bg_alert font_5 font_xbold grid justify_center opacity_5 r_0 self_center l_0 text_center" style="height:100px"><span class="self_center c_black font-blend_color-burn">UNSAFE</span></div>
	<img
		class="w_100"
		src="https://via.placeholder.com/400x300.png?text=Mobile+400x300"
	/>
</div>
Copy Code