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

<nav class="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>
		</ul>
	</div>
</nav>
Copy Code