Arches: CardioSmart

Arches:CardioSmart

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/cardiosmart_boot.css, line 9030

13.4 FYHAH Header Bar

Description: Header of the single page applicaiton

Example

Default styling

<section class="bg_white br-b_2 br_primary br_solid c_black flex">
	<nav class="flex_auto font_1 m-b_0">
		<ul class="flex ul_none">
			<li class=" flex_shrink flex">
				<a class="c_primary self_center p_3  br_black-3 br_dotted br-r_1 " href="#"><i class="fas fa-home-heart"></i></a>
			</li>
			<li class="m-l_3 p-l_3 br_black-3 br_dotted br-r_1 flex_shrink flex">
				<a class="c_primary self_center p_3" href="#"><i class="fas fa-search"></i></a>
			</li>
			<li class="m-l_3 p-l_3 br_black-3 br_dotted br-r_1 flex_shrink flex">
				<span class="c_primary active self_center p_3  font_bold">Profile</span>
			</li>
		</ul>
	</nav>
	<div class="flex">
		<ul class="flex ul_none">
			<li class="flex_none flex active">
				<div class="self_center a:_none">
					<i class=" br_2 br_dashed br_radius br_black-3 fa-question fas m-r_3 p_3 "></i>
				</div>
				<div class="self_center display_none a:_block">
					<i
						class="bg_highlight br_2 br_highlight-n3 br_radius br_solid c_black fa-hospital fas m-r_3 p_3"></i>
				</div>
			</li>
			<li class="flex_none flex ">
				<div class="self_center a:_none">
					<i class=" br_2 br_dashed br_radius br_black-3 fa-question fas m-r_3 p_3 "></i>
				</div>
				<div class="self_center display_none a:_block">
					<i
						class="bg_highlight br_2 br_highlight-n3 br_radius br_solid c_black fa-hospital fas m-r_3 p_3"></i>
				</div>
			</li>
			<li class="flex_none flex ">
				<div class="self_center a:_none">
					<i class=" br_2 br_dashed br_radius br_black-3 fa-question fas m-r_3 p_3 "></i>
				</div>
				<div class="self_center display_none a:_block">
					<i
						class="bg_highlight br_2 br_highlight-n3 br_radius br_solid c_black fa-hospital fas m-r_3 p_3"></i>
				</div>
			</li>
		</ul>
		<div class="CS_col-xs-12 flex flex_auto p_3">
			<a href="#" class="CS_col-xs-12 br_radius font_0 p-x_3 p_2 bg_shade-3 c_black-2">Compare</a>
		</div>
	</div>
</section>
Copy Code