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

Example

No Access to [PRODUCT NAME]

[PRODUCT DESCRIPTION]. To read more about the details of [PRODUCT NAME] click the learn more button.

Registration Steps

  1. To purchase, please click the "Register" button below. Once you have completed your purchase, please wait 15 minutes to allow the system to process the information.

  2. Register
  3. If you have just registered and you have waited 15 minutes and you have arrived here in error click the "Refresh Access" Button to get into [PRODUCT NAME].

  4. Refresh Access
  5. If you believe you have received this message in error, please contact Member Care

    • For additional questions, please contact ACC Member Care.
    • Email: MemberCare@ACC.org
    • Phone: 202-375-6000 ext. 5603
    • Toll-Free: 800-253-4636 ext. 5603

    Account Information

    • User Name: Regina Rutherford
    • Member ID: 0152151214
    • Email: test@boo.com

    Click the 'Member Help' button to send along your member information to help diagnose this issue.

<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative ">
	<div class="reading-typography flex flex_column gap_4">
		<h2 class="">No Access to [PRODUCT NAME]</h2>
		<p>[PRODUCT DESCRIPTION].  To read more about the details of [PRODUCT NAME] click the learn more button.</p>
		<div class="flex flex_row gap_3 justify_center">
			<a href="[PRODUCT MARKETING URL]" class="w_100 block max-w_20 btn btn-secondary c_white font_bold font_ui h:c_white shadow_overlap-light " title="Navigate to [PRODUCT NAME] detail page">Learn More</a>
		</div>
	</div>
</div>
<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative ">
	<div class="reading-typography flex flex_column gap_4">
		<h2 class="font_bold">Registration Steps</h2>
		<ol class="counter_reset m_0 p_0 ul_none flex_column flex gap_4">
			<li class="flex flex_row">
				<span class="c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4"></span>
				<div class="flex_auto">
					<p>To purchase, please click the "Register" button below. Once you have completed your purchase, please <strong class="uppercase m-x_2 p_2 bg_warning-3 br_radius p-x_3 font_xbold nowrap">wait 15 minutes</strong> to allow the system to process the information. </p>
				</div>
			</li>
			<li class="flex flex_row gap_3 justify_center">
				<a title="register for the  [PRODUCT NAME]" href="https://www.acc.org/Education-and-Meetings/Meetings/Meeting-Items/2022/01/01/01/04/ACC-Anywhere-ACC22-On-Demand" class="w_100 block max-w_20 btn btn-primary c_white font_bold font_ui h:c_white shadow_overlap-light ">Register</a>
			</li>
			<li class="flex flex_row">
				<span class="c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4"></span>
				<div class="flex_auto">
					<p>If you have just registered and you have <strong class="uppercase m-x_2 p_2 bg_warning-3 br_radius p-x_3 font_xbold nowrap">waited 15 minutes</strong> and you have arrived here in error click the "Refresh Access" Button to get into [PRODUCT NAME].</p>
				</div>
			</li>
			<li class="flex flex_row gap_3 justify_center">
				<a title="reset the access from you account" href="[EVENT AUTHENTICATION URL]" class="w_100 block max-w_20 btn btn-primary c_white font_bold font_ui h:c_white shadow_overlap-light ">Refresh Access</a>
			</li>
			<li class="flex flex_row">
				<span class="c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4"></span>
				<div class="flex_auto">
					<div class="flex flex_row:md flex_column">
						<div class="reading-typography flex flex_column gap_4 flex_50 p-r_5:md">
							<p class="font_bold">If you believe you have received this message in error, please contact <a href="mailto:MemberCare@ACC.org"><em>Member Care</em></a> </p>
							<ul class="ul_none p_3">
								<li class="font_bold">For additional questions, please contact ACC Member Care.</li>
								<li><strong>Email:</strong> <a href="mailto:MemberCare@ACC.org"><em>MemberCare@ACC.org</em></a></li>
								<li><strong>Phone:</strong> 202-375-6000 ext. 5603   </li>
								<li><strong>Toll-Free:</strong> 800-253-4636 ext. 5603</li>
							</ul>
						</div>
						<div class=" flex_50"`>
							<section class="bg_acc-n2 br_1 br_black-2 br_round br_solid p-x_5:lg p_4 inset-level_up shadow_bevel-bold">
							  <div class="c_white">
							    <h2 class="br-b_1 br_solid br_white-6 c_white m-t_2 p-b_3 text_center">Account Information</h2>
							    <ul class="ul_none p_0 m_0">
							    <li class=""><strong>User Name:</strong> <span data-type="User Full Name">Regina Rutherford</span> </li>
							    <li class=""><strong>Member ID:</strong> <span data-type="Member ID">0152151214</span> </li><li class=""><strong>Email:</strong> <span data-type="email">test@boo.com</span> </li>
							    </ul>
							  </div>
							  <div class="bg_black-4 br_radius c_white m-b_n2 m-t_4 m-x_n4 p_4 shadow_emboss-light">
							    <p class=""><strong>Click the 'Member Help' button to send along your member information to help diagnose this issue.</strong></p><div class="text_center"><a href="mailTO:membercare@acc.org?body='name,email,personify'" class="btn btn-primary c_white inline-block m-x_auto shadow_overlap-light text_center w_auto">Member Care</a></div>
							  </div>
							</section>						</div>
					</div>
				</div>
			</li>
		</ol>
	</div>
</div>
Copy Code