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: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Example

I would like to have a copy of each "thank you for paying statement".

Find the Member you would like to pay for by searching by the ACC member ID

Where do I locate the member ID
No Member Found

Please Confirm Mebmer ID Number and Try Again.

Members Full Name. MD. FACC

Is this the member you want to pay for.

Payment History

  • Paid Today
  • Thank Your For Payment
    Full Name
    $750.00
    Paid On: Today|ACC ID: 000141421
  • Full Name
    $750.00
    Paid On: Today|ACC ID: 000141421
  • Full Name
    $750.00
    Paid On: Today|ACC ID: 000141421
  • Full Name
    $750.00
    Paid On: Today|ACC ID: 000141421
  • Paid June 21, 2019
  • Full Name
    $750.00
    Paid On: June 21, 2019|ACC ID: 000141421
<div class="flex:md texture_light" style=" min-height: 100vh;">
	<div class="flex_auto relative">
		<div class="bg_shade-2 clearfix p_5">
			<h1 class="c_white font_2 font_display font_regular m_0">
				<input type="checkbox" checked="" class="m-b_4" /><span class="flex_auto">
					I would like to have a copy of each "thank you for paying statement".
				</span>
			</h1>
			<div class="flex max-w_10">
				<input type="email" class="flex_auto m_0" /><button
					class="button flex_auto lh_2 p-x_4 p_3 bg_primary br_0 br_none br-tr_radius br-br_radius button c_white font_2 h:bg_primary-n2 m-r_3 display_none p-x_4 p-y_2"
				>
					update
				</button>
			</div>
		</div>
		<div class="shadow_1 br_radius bg_white m_4 p_5 text_center font_copy">
			<h1 class="c_black font_3 font_display font_regular m_0">
				Find the Member you would like to pay for by searching by the ACC member ID
			</h1>
			<a href="" class="underline c-primary font_n1">Where do I locate the member ID</a>
			<div class="m-t_4 flex ">
				<input type="text" class=" flex_auto font_2 font_ui p-x_3 p-y_2" />
				<button class="bg_primary  br_0 br_none button c_white font_2 p-x_4 p-y_2">
					Search
				</button>
			</div>
			<div
				class="bg_alert-5 bg_white br_1 br_alert-n1 br_radius br_solid font_copy m-t_4 p-t_3 p_3 shadow_1 text_center"
			>
				<div class="c_alert-n2 font_3 font_accent: m_2 p-t_0 p_3 text_center">
					No Member Found
				</div>
				<h1 class="c_black font_2 font_display font_regular m_2">
					Please Confirm Mebmer ID Number and Try Again.
				</h1>
			</div>
		</div>
		<div class="shadow_1 br_radius bg_white m_4 p_5 text_center font_copy">
			<div class="shadow_n1 br_radius bg_primary-4 m_3 p_3 text_center font_4 font_accent:">
				Members Full Name. MD. FACC
			</div>
			<h1 class="c_black font_3 font_display font_regular m_2">
				Is this the member you want to pay for.
			</h1>
			<div class="m-t_4 flex max-w_40 m_auto">
				<button
					class="button flex_auto bg_primary h:bg_primary-n2 br_0 br_none font_3 p-x_4 p-y_2  br_radius c_white m-r_3"
				>
					Yes
				</button>
				<button
					class="button flex_auto bg_shade-3 h:bg_shade-1 br_0 br_none font_3 p-x_4 p-y_2 br_radius  m-r_3 c_black"
				>
					No
				</button>
			</div>
		</div>
	</div>
	<div class="bg_white br-l_1 br_0 br_shade-2 br_solid flex_shrink w_20:md w_30:lg">
		<h2 class="font_2 font_display font_regular p-x_4 m-b_0">
			Payment History
		</h2>
		<section class="m-x_3 p-x_3 p-y_4">
			<ul class="m-t_0 ul_none">
				<li class="br-b_1 br-t_1 br_primary br_solid font_n1 font_ui m-y_2 p-y_2">
					Paid <span class="c_primary font_bold"> Today</span>
				</li>
				<li class="br_2 br_radius br_solid br_success-2 m-y_3 p_3">
					<div
						class="bg_success-1 br_3 br_success-0 c_white font_2 m-b_3 m-t_n3 m-x_n3 m_2 p-x_4 p_2 text_center"
					>
						Thank Your For Payment
					</div>
					<div class="font_1 flex c_shade font_display">
						<div class="flex_auto">Full Name</div>
						<div class="flex_shrink c_primary font_bold font_n1">$750.00</div>
					</div>
					<div class="font_n1 font_ui c_shade-1">
						<strong class="font_bold">Paid On:</strong>
						<span class="font_italic c_primary font_bold">Today</span>|<strong class="font_bold"
							>ACC ID:</strong
						>
						<span class="font_italic">000141421</span>
					</div>
				</li>
				<li class="br_dotted br-b_1 br_shade-5 p-b_3">
					<div class="font_1 flex c_shade font_display">
						<div class="flex_auto">Full Name</div>
						<div class="flex_shrink c_primary font_bold font_n1">$750.00</div>
					</div>
					<div class="font_n1 font_ui c_shade-1">
						<strong class="font_bold">Paid On:</strong>
						<span class="font_italic c_primary font_bold">Today</span>|<strong class="font_bold"
							>ACC ID:</strong
						>
						<span class="font_italic">000141421</span>
					</div>
				</li>
				<li class="br_dotted br-b_1 br_shade-5 p-b_3">
					<div class="font_1 flex c_shade font_display">
						<div class="flex_auto">Full Name</div>
						<div class="flex_shrink c_primary font_bold font_n1">$750.00</div>
					</div>
					<div class="font_n1 font_ui c_shade-1">
						<strong class="font_bold">Paid On:</strong>
						<span class="font_italic c_primary font_bold">Today</span>|<strong class="font_bold"
							>ACC ID:</strong
						>
						<span class="font_italic">000141421</span>
					</div>
				</li>
				<li class="br_dotted br-b_1 br_shade-5 p-b_3">
					<div class="font_1 flex c_shade font_display">
						<div class="flex_auto">Full Name</div>
						<div class="flex_shrink c_primary font_bold font_n1">$750.00</div>
					</div>
					<div class="font_n1 font_ui c_shade-1">
						<strong class="font_bold">Paid On:</strong>
						<span class="font_italic c_primary font_bold">Today</span>|<strong class="font_bold"
							>ACC ID:</strong
						>
						<span class="font_italic">000141421</span>
					</div>
				</li>
				<li class="br-b_1 br-t_1 br_shade-3 br_solid c_shade-n1 font_n1 font_ui m-y_2 p-y_2">
					Paid <span class="c_primary font_bold">June 21, 2019</span>
				</li>
				<li class="br_dotted br-b_1 br_shade-5 p-b_3">
					<div class="font_1 flex c_shade font_display">
						<div class="flex_auto">Full Name</div>
						<div class="flex_shrink c_primary font_bold font_n1">$750.00</div>
					</div>
					<div class="font_n1 font_ui c_shade-1">
						<strong class="font_bold">Paid On:</strong>
						<span class="font_italic">June 21, 2019</span>|<strong class="font_bold">ACC ID:</strong>
						<span class="font_italic">000141421</span>
					</div>
				</li>
			</ul>
		</section>
	</div>
</div>
Copy Code