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

Recipes

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

Source: dist/css/journal_boot.css, line 12189

5.3 Interactive Extras

Interactions can be enhanced with toggle icons or loading graphics to show the system is responding to user input.

Example

This is a header

This is a card.

It has an easy to override visual style, and is appropriately subdued.

I am so clickable
<div class="card shadow_2 cell small-6 large-4 max-w_40"  data-style="" >
  <div class=" font_accent: border-top-left-square c_white font_3 p_4 texture_dust card-divider bg_primary card-header">
    This is a header
  </div>
  <img src="https://picsum.photos/400/300">
  <div class="card-section card-body">
    <h4>This is a card.</h4>
	 <p>It has an easy to override visual style, and is appropriately subdued.</p>
	 <a href="#" class="expanded-click-area button btn btn-primary">I am so clickable</a>
  </div>
</div>
Copy Code

Source: dist/css/journal_boot.css, line 7625

5.3.3 Aspect Ratio

To create an image placeholder use the lorem-loader plus an aspect of the intended image on th parent container while waiting for the image.The placeholder will be a 100% of the container so size the container properly.

Example s

Default styling

 

.aspect_8x10

lock image to a 8 to 10 ratio

 

.aspect_1x1

lock image to a 1 to 1 ratio

 

.aspect_2x1

lock image to a 2 to 1 ratio

 

.aspect_3x2

lock image to a 3 to 2 ratio

 

.aspect_4x3

lock image to a 4 to 3 ratio

 

.aspect_16x9

lock image to a 16 to 9 ratio

 

.aspect_21x9

lock image to a 21 to 9 ratio

 

.aspect_4x1

lock image to a 4 to 1 ratio

 
<div class="grid-w_2 max-w_20"  data-style="[modifier class]" >
   <div class="m-y_2 lorem-loader [modifier class] ">&nbsp;</div>
</div>
Copy Code

Example

This is a header

This is a card.

It has an easy to override visual style, and is appropriately subdued.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!

<div class="card shadow_2 cell small-6 large-4 max-w_30" >
    <div class=" font_accent: border-top-left-square c_white font_3 p_4 texture_dust card-divider bg_primary card-header">
    This is a header
    </div>
    <div class="card-section card-body p_4 scrollbar-mini overflow_auto" style="max-height:300px;">
        <h4>This is a card.</h4>
        <p class="font_1">It has an easy to override visual style, and is appropriately subdued.</p>
        <img src="https://picsum.photos/400/300">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
    </div>
    <div class="card-divider card-footer br_0 br_solid br-t_1 br_primary"> <a href="#" class="button btn btn-primary">I am so clickable</a></div>
</div>
Copy Code

Source: dist/css/journal_boot.css, line 8153

5.3.5 Stars

experimental

Star ratings should be build throughout arches in a more dynamic way but this is an easy level of adding stars.

Experimental: This item is not finalized and might be subject to change

Example

<ul class="ul_none flex flex_inline star-rating">
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
</ul>
Copy Code

Source: dist/css/journal_boot.css, line 7605

5.3.6 Lorem Text Loader

deprecated

It is often we need to have space held for a return of details or text.

Deprecated: This set of components was never fully utilized and will be removed for sake of size. 06/01/21

Example

 

 

 

 

<div class="max-w_40">
   <h1 class="lorem-loader font_3 m-y_3">&nbsp;</h1>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
</div>
Copy Code

Source: dist/css/journal_boot.css, line 7930

5.3.7 Is Active Toggle

Many momment there are needs for toggles of icon when the parent is in the state of active. Used in tree navs, dropdowns, and collapsing areas.

Example s

Default styling

  • FA Solid [modifier class] active
  • FA Regular [modifier class] active
  • FA Light [modifier class] active

.icon-toggle_plus-minus

Toggle between plus and minus square

  • FA Solid icon-toggle_plus-minus active
  • FA Regular icon-toggle_plus-minus active
  • FA Light icon-toggle_plus-minus active

.icon-toggle_chevron-up-down

Toggle a chevron pointing up and then down.

  • FA Solid icon-toggle_chevron-up-down active
  • FA Regular icon-toggle_chevron-up-down active
  • FA Light icon-toggle_chevron-up-down active

.icon-toggle_chevron-double-up-down

Toggle the double chevron to point up when active

  • FA Solid icon-toggle_chevron-double-up-down active
  • FA Regular icon-toggle_chevron-double-up-down active
  • FA Light icon-toggle_chevron-double-up-down active

.icon-toggle_chevron-double-left-right

Toggle chevron left and right

  • FA Solid icon-toggle_chevron-double-left-right active
  • FA Regular icon-toggle_chevron-double-left-right active
  • FA Light icon-toggle_chevron-double-left-right active

.icon-toggle_arrow-circle

Toggle the arrow to have a circle when active.

  • FA Solid icon-toggle_arrow-circle active
  • FA Regular icon-toggle_arrow-circle active
  • FA Light icon-toggle_arrow-circle active

.icon-toggle_bars-times

Toggle between bars and times

  • FA Solid icon-toggle_bars-times active
  • FA Regular icon-toggle_bars-times active
  • FA Light icon-toggle_bars-times active

.icon-toggle_check-sqaure

Check Marks toggle on and off

  • FA Solid icon-toggle_check-sqaure active
  • FA Regular icon-toggle_check-sqaure active
  • FA Light icon-toggle_check-sqaure active

.icon-toggle_check-circle

Check Marks toggle on and off

  • FA Solid icon-toggle_check-circle active
  • FA Regular icon-toggle_check-circle active
  • FA Light icon-toggle_check-circle active

.icon-toggle_check

Check Marks toggle on and off

  • FA Solid icon-toggle_check active
  • FA Regular icon-toggle_check active
  • FA Light icon-toggle_check active
<ul data-style="[modifier class]" class="ul_none m_0 p_0">
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
	<i class="flex_none m-r_5 font_3 fas fa-fw [modifier class]"></i>
			<span class="flex_auto ">FA Solid [modifier class]</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
	<i class="flex_none m-r_5 font_3 far  fa-fw [modifier class]"></i>
			<span class="flex_auto ">FA Regular [modifier class]</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
	<i class="flex_none m-r_5 font_3 fal fa-fw [modifier class]"></i>
			<span class="flex_auto">FA Light [modifier class]</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
</ul>
Copy Code