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

Arches:JACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Example

<div class="flex  relative">
	<nav class="flex_auto navbar navbar-primary navbar-expand-lg navbar-dark bg_acc font_1">
	<button
		class="br_white-2 is-active_toggle-function m-l_n2 m-y_3 navbar-toggler p-l_2 p-r_3 p-y_2 collapsed"
		type="button"
		data-toggle="collapse"
		data-target="#navbarSupportedContent"
		aria-controls="navbarSupportedContent"
		aria-expanded="false"
		aria-label="Toggle navigation"
	>
		<i class="icon-toggle_bars-times fas a:c_acc-2 c_white"></i
		><span class="a:c_acc-2 c_white">&nbsp;Menu</span>
	</button>
	<div class="collapse navbar-collapse" id="navbarSupportedContent">
		<ul class="navbar-nav">
			<li class="display_none:lg nav-item">
				<a
					class="nav-link"
					href="//www.acc.org/"
					title="Home of the American College of Cardiology"
					><i class="fas fa-home"></i
					><span class="display_none:lg">&nbsp;Home</span></a
				>
			</li>
			<li class="display_none:lg nav-item">
				<a
					class="nav-link"
					href="//www.acc.org/guidelines#doctype=Guidelines"
					title="Access ACC guidelines and clinical policy documents as well as related resources"
					>Guidelines</a
				>
			</li>
			<li class="nav-item dropdown">
				<a
					class="nav-link dropdown-toggle is-active_toggle-function"
					href="/clinical-topics"
					id="clinicalTopicsDropdown"
					role="button"
					data-toggle="dropdown"
					aria-haspopup="true"
					aria-expanded="false"
					><i
						class="far faw icon-toggle_plus-minus display_none:lg m-l_n2 m-r_2"
					></i
					>Clinical Topics</a
				>
				<div
					class="dropdown-menu br_none br_solid:lg m-x_0:lg m-x_n4 m-t_0 m-t_2:lg"
					aria-labelledby="clinicalTopicsDropdown"
				>
					<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
						<div class="flex_auto p-x_2 p-y_0 p-y_3:md">
							<ul class="ul_none m_0">
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/acute-coronary-syndromes"
										>Acute Coronary Syndromes</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/anticoagulation-management"
										title="Anticoagulation Management"
										>Anticoagulation Management</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/arrhythmias-and-clinical-ep"
										>Arrhythmias and Clinical EP</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/acute-coronary-syndromes/atherosclerotic-disease-cad-pad"
										>Atherosclerotic Disease (CAD/PAD)</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/cardiac-surgery"
										>Cardiac Surgery</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/cardio-oncology"
										>Cardio-Oncology</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/congenital-heart-disease-pediatric-cardiology"
										>Congenital Heart Disease and Pediatric Cardiology</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/diabetes-and-cardiometabolic-disease"
										>Diabetes and Cardiometabolic Disease</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/dyslipidemia"
										title="Dyslipidemia"
										>Dyslipidemia</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/geriatric-cardiology"
										>Geriatric Cardiology</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/heart-failure-and-cardiomyopathies"
										title="Heart Failure and Cardiomyopathies"
										>Heart Failure and Cardiomyopathies</a
									>
								</li>
							</ul>
						</div>
						<div
							class="flex_auto p-x_2 p-y_0 p-y_3:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md"
						>
							<ul class="ul_none">
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/dyslipidemia/hypertriglyceridemia"
										>Hypertriglyceridemia</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/invasive-cardiovascular-angiography-and-intervention"
										title="Invasive Cardiovascular Angiography and Intervention"
										>Invasive Cardiovascular Angiography and Intervention</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/noninvasive-imaging"
										title="Noninvasive Imaging"
										>Noninvasive Imaging</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/pericardial-disease"
										title="Pericardial Disease"
										>Pericardial Disease</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/prevention"
										title="Prevention"
										>Prevention</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/pulmonary-hypertension-and-venous-thromboembolism"
										>Pulmonary Hypertension and Venous Thromboembolism</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/sports-and-exercise-cardiology"
										>Sports and Exercise Cardiology</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/stable-ischemic-heart-disease"
										title="Stable Ischemic Heart Disease"
										>Stable Ischemic Heart Disease</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/valvular-heart-disease"
										>Valvular Heart Disease</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/clinical-topics/vascular-medicine"
										>Vascular Medicine</a
									>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Latest In Cardiology</a>
			</li>
			<li class="nav-item dropdown">
				<a
					class="nav-link dropdown-toggle is-active_toggle-function"
					href="#"
					id="eduDropdown"
					role="button"
					data-toggle="dropdown"
					aria-haspopup="true"
					aria-expanded="false"
					><i
						class="far faw icon-toggle_plus-minus display_none:lg m-l_n2 m-r_2"
					></i>
					Education and Meetings
				</a>
				<div
					class="dropdown-menu br_none br_solid:lg m-x_0:lg m-x_n4 m-t_0 m-t_2:lg"
					aria-labelledby="eduDropdown"
				>
					<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
						<div class="flex_auto p-x_2 p-y_0 p-y_3:md">
							<ul class="ul_none">
								<li class="">
									<span class="toggler"></span>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/education-and-meetings/education-catalog"
										>Online Learning Catalog</a
									>
									<ul class="ul_none font_n1 lh_3">
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/earncredit"
												>Earn Credit</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/education-and-meetings/products-and-resources/board-prep-offerings"
												title="Board Prep Offerings"
												>Board Prep Offerings</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/education-and-meetings/education-catalog"
												>View the Entire Catalog</a
											>
										</li>
									</ul>
								</li>
								<li class="">
									<span class="toggler"></span>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/education-and-meetings/education-catalog"
										>Products</a
									>
									<ul class="ul_none font_n1 lh_3">
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/education-and-meetings/products-and-resources/accsap"
												>ACCSAP</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/education-and-meetings/products-and-resources/accel-audio"
												>ACCEL</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/education-and-meetings/products-and-resources/cardiosource-plus"
												>CardioSource Plus for Institutions and Practices</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/education-and-meetings/products-and-resources/cathsap"
												>CathSAP</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/education-and-meetings/products-and-resources/ecg-drill-and-practice"
												title="ECG Drill and Practice"
												>ECG Drill and Practice</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/education-and-meetings/products-and-resources/echosap"
												>EchoSAP</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/education-and-meetings/products-and-resources/epsap"
												>EP SAP</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/education-and-meetings/products-and-resources/heart-songs-5"
												>Heart Songs</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/education-and-meetings/products-and-resources/iscience"
												>iScience</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod"
												>Nuclear Cardiology and Cardiac CT Meeting on Demand</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure"
												>RightSTEPS Optimizing Medical Therapy for Chronic Heart
												Failure</a
											>
										</li>
									</ul>
								</li>
							</ul>
						</div>
						<div
							class="flex_auto p-x_2 p-y_0 p-y_3:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md"
						>
							<ul class="ul_none m_0">
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/education-and-meetings/products-and-resources"
										>Resources</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/education-and-meetings/products-and-resources/guideline-education"
										>Guideline Education</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/education-and-meetings/maintenance-of-certification-information-hub"
										>Understanding MOC</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/education-and-meetings/image-and-slide-gallery"
										>Image and Slide Gallery</a
									>
								</li>
								<li class="">
									<span class="toggler"></span>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/education-and-meetings/meetings"
										>Meetings</a
									>
									<ul class="ul_none font_n1 lh_3">
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="http://accscientificsession.acc.org"
												class="new-window-icon"
												target="_blank"
												>Annual Scientific Session and Related Events</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="http://www.acc.org/education-and-meetings/meetings?w_nav=MN#type=Chapter Meetings"
												>Chapter Meetings</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="http://www.acc.org/education-and-meetings/meetings?w_nav=MN#type=Live Meetings"
												class="lvl2"
												>Live Meetings</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/education-and-meetings/meetings#type=Webinars - Live"
												class="lvl2"
												>Webinars - Live</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/education-and-meetings/meetings?view=archive&amp;#type=Webinars - OnDemand"
												>Webinars - OnDemand</a
											>
										</li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</li>
			<li class="nav-item dropdown">
				<a
					class="nav-link dropdown-toggle is-active_toggle-function"
					href="#"
					id="toolDropdown"
					role="button"
					data-toggle="dropdown"
					aria-haspopup="true"
					aria-expanded="false"
					><i
						class="far faw icon-toggle_plus-minus display_none:lg m-l_n2 m-r_2"
					></i
					>Tools &amp; Practice Support
				</a>
				<div
					class="dropdown-menu m-x_0:lg m-x_n4 m-t_0 m-t_2:lg"
					aria-labelledby="toolDropdown"
				>
					<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
						<div class="flex_auto p-x_2 p-y_0 p-y_3:md order_2 order_1:md">
							<ul class="ul_none">
								<li class="relative m-x_2:md m-x_4">
									<a
										href="http://cvquality.acc.org/?_ga=2.33577825.159963902.1562853382-843642371.1562007133"
										target="_blank"
										class="expanded-click-area transition_1 h:opacity opacity_8"
										><img
											src="https://www.acc.org/~/media/Non-Clinical/Images/External%20Site%20Logos/ACC_QII_logo.png"
											alt="QII"
									/></a>
								</li>
								<li class="relative m-x_2:md m-x_4">
									<a
										href="http://cvquality.acc.org/NCDR-Home.aspx?_ga=2.91395290.159963902.1562853382-843642371.1562007133"
										target="_blank"
										class="expanded-click-area transition_1 h:opacity opacity_8"
										><img
											src="https://www.acc.org/~/media/Non-Clinical/Images/External Site Logos/ACC_NCDR_logo.png"
											alt="NCDR"
									/></a>
								</li>
							</ul>
						</div>
						<div
							class="flex_auto p-x_2 p-y_0 p-y_3:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md order_1 order_2:md"
						>
							<ul class="ul_none">
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/tools-and-practice-support/advocacy-at-the-acc"
										>Advocacy at the ACC</a
									>
									<ul class="ul_none font_n1 lh_3">
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/tools-and-practice-support/advocacy-at-the-acc/advocacy-action"
												>Advocacy Action</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/tools-and-practice-support/advocacy-at-the-acc/health-policy-issue-center/alternative-payment-model-framework"
												>Alternative Payment Model Framework</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/tools-and-practice-support/advocacy-at-the-acc/acc-legislative-conference"
												>Legislative Conference</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="http://www.acc.org/macra/index.html"
												target="_blank"
												>MACRA/QPP Hub</a
											>
										</li>
										<li class="text-indent_1">
											<a
												class="dropdown-item transition_4 wrap nowrap:lg"
												href="/tools-and-practice-support/advocacy-at-the-acc/acc-political-action-committee"
												>ACC Political Action Committee</a
											>
										</li>
									</ul>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="http://www.healthecareers.com/acc"
										class="new-window-icon"
										target="_blank"
										>Cardiology Careers</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/tools-and-practice-support/clinical-toolkits"
										>Clinical Toolkits</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/tools-and-practice-support/expert-consensus-decision-pathways"
										>Expert Consensus Decision Pathways</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/tools-and-practice-support/infographics"
										>Infographics</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/tools-and-practice-support/mobile-resources"
										>Mobile Apps</a
									>
								</li>
								<li>
									<a
										class="dropdown-item transition_4 wrap nowrap:lg"
										href="/tools-and-practice-support/quality-programs"
										>Quality Programs</a
									>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</li>
			<li class="display_none:lg nav-item">
				<a
					class="nav-link"
					href="//www.acc.org/membership"
					title="Access exclusive member features and groups or learn about ACC membership"
					>Membership</a
				>
			</li>
			<li class="display_none:lg nav-item">
				<a
					class="nav-link"
					href="//www.acc.org/about-acc"
					title="Learn about the ACC organization"
					>About ACC</a
				>
			</li>
			<li class="display_none:lg nav-item">
				<a
					class="nav-link"
					href="http://www.onlinejacc.org/"
					target="_blank"
					title="JACC.org"
					>JACC</a
				>
			</li>
			<li class="display_none:lg nav-item">
				<a
					class="nav-link"
					href="http://accscientificsession.acc.org"
					target="_blank"
					title="ACC Annual Scientific Session Website"
					>ACC.19</a
				>
			</li>
		</ul>
	</div>
</nav>
<nav class="absolute bg_primary flex_shrink font_0 font_1:lg navbar navbar-dark navbar-expand p-y_2 r_0 br-t_1 br_solid br_primary">
		<ul class="navbar-nav m-t_1">
			<li class="nav-item dropdown">
				<a class="nav-link is-active_toggle-function" id="myACCDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="far icon-toggle_chevron-up-down"></i> My ACC</a>
				<div class="dropdown-menu dropdown-menu-right br_none br_solid:lg m-x_0:lg m-x_n4 m-t_0 m-t_2:lg font_0" aria-labelledby="navbarDropdown">
					<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
						<div class="flex_auto p-x_2 p-y_0 ">
							<ul class="ul_none m_0">
								<li>
									<a class="dropdown-item transition_4 nowrap" href="/my-acc/my-profile">My Profile</a>
								</li>
								<li>
									<a class="dropdown-item transition_4 nowrap" href="/my-acc/my-training-program">My Training Programs</a>
								</li>
								<li>
									<a class="dropdown-item transition_4 nowrap" href="/my-acc/my-membership">My Membership</a>
								</li>
								<li>
									<a class="dropdown-item transition_4 nowrap" href="/my-acc/my-library">My Library</a>
								</li>
								<li>
									<a class="dropdown-item transition_4 nowrap" href="http://edu.acc.org/diweb/dashboard">My Learning Dashboard</a>
								</li>
								<li>
									<a class="dropdown-item transition_4 nowrap" href="http://edu.acc.org/diweb/grades">My Transcript</a>
								</li>
								<li>
									<a class="dropdown-item transition_4 nowrap" href="/my-acc/ncdr-physician-dashboard">NCDR Physician Dashboard</a>
								</li>
								<li>
									<a class="dropdown-item transition_4 nowrap" href="/my-acc/my-communication-preferences">My Communication Preferences</a>
								</li>
								<li>
									<a class="dropdown-item transition_4 nowrap" href="https://memberhub.acc.org/">ACC Member Hub</a>
								</li>
								<li>
									<a class="dropdown-item transition_4 nowrap" href="/my-acc/my-purchase-history">My Purchases</a>
								</li>
								<li>
									<a class="dropdown-item transition_4 nowrap" href="/my-acc/personalization">Personalize ACC.org</a>
								</li>
								<div class="dropdown-divider m-y_3"></div>
								<li class="">
									<a class="dropdown-item transition_4 nowrap" href="/RemoteLogOff"> Logout</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</li>
			<li class="nav-item">
				<a class=" nav-link" href="#"><i class="far fa-shopping-cart"></i></a>
			</li>
			<li class="nav-item">
				<a class=" nav-link" href="#"><i class="fas fa-sign-out-alt"></i></a>
			</li>
		</ul>
	</nav>
	</div>
Copy Code