Arches: CardioSmart

Arches:CardioSmart

Multi Product Brand Style System by the American College of Cardiology

Example

Default styling

Search

Select all services hospitals must perform
<fieldset id="searchpanel" class="bg_white br_radius max-w_25 p_4 shadow_overlap-bold">
	<header class="flex font_2 justify_between search-panel-toggle">
		<div class="display_none:md">
			<a class="btn btn-info collapse-trigger font_0 p_2 self_center"><i class="fa icon-toggle_plus-minus"></i></a>
		</div>
		<h2 class="flex_auto lh_0 m_0 p-x_3 self_center">Search</h2>
		<div class="flex_shrink">
			<a href="#" data-bind="click: Behavior_ClearSearchValues flex_none" class="btn btn-link self_center">
				Clear
				<i class="fa fa-times-circle"></i>
			</a>
		</div>
	</header>
	<section class="search-panel-content collapsable CS_col-xs-12">
		<div class="control-group">
			<div class="control-label">
				<label for="HospitalName">Hospital Name</label>
			</div>
			<div class="controls">
				<input id="HospitalName" type="text" value="" placeholder="Address,State, or Zip">
			</div>
		</div>
		<div class="control-group">
			<div class="control-label">
				<label for="HospitalLocation">Location</label>
			</div>
			<div class="controls">
				<input id="HospitalLocation" type="text" value="" placeholder="Address,State, or Zip">
				<input class="display_none" data-bind="value:Latitude" id="Latitude" name="Latitude" type="text" value="">
				<input class="display_none" data-bind="value:Longitude" id="Longitude" name="Longitude" type="text" value="">
			</div>
		</div>
		<div class="control-group">
			<div class="control-label">
				<label class="lh_0 m-b_0">Cardiac Services
					<a class="underline c_primary font_n1" href="https://www.cardiosmart.org/resources/pr-glossary" target="_blank">
						<span class="display_none inline-block:md">Services Glossary</span>
						<span class="alt-short-text display_none:md inline-block">Glossary</span>
						<i class="fa fa-fw fa-question-circle"></i>
					</a>
				</label>
				<span class="block c_accent font_n1 help-block">Select all services hospitals must perform</span>
			</div>
			<div class="controls">
				<select name="ServiceId" id="ServiceId" class="selectpicker knockoutjs-selectpicker" multiple="multiple">
					<option value="11">Acute Myocardial Infarction Treatment</option>
					<option value="16">Atrial Fibrillation Ablation</option>
					<option value="3">Cardiac Defibrillator Implantation</option>
					<option value="14">Cardiac Surgery Services</option>
					<option value="6">Carotid Artery Stenting</option>
					<option value="7">Carotid Endarterectomy</option>
					<option value="8">Congenital Heart Defect Intervention</option>
					<option value="15">Coronary Artery Bypass Graft Surgery</option>
					<option value="4">Diagnostic Cardiac Catheterization</option>
					<option value="1">Electrophysiology Studies</option>
					<option value="12">Left Atrial Appendage Occlusion</option>
					<option value="2">Pacemaker Implantation</option>
					<option value="13">Percutaneous Coronary Intervention for Acute Myocardial
						Infarction</option>
					<option value="5">Percutaneous Coronary Intervention for Elective and
						Emergency Cases</option>
					<option value="10">Percutaneous Peripheral Vascular Intervention</option>
					<option value="9">Transcatheter Valve Replacement</option>
				</select>
			</div>
		</div>
		<div class="control-group font_n1 m-t_2">
			<div class="control-label">
				<label for="IsParticipatingLbl"><i id="FilterLbl">Filter search results by</i></label>
				<label class="checkbox" id="IsParticipatingLbl">
					<input data-bind="checked: IsParticipating, click: Behavior_SearchHospitals, css: { 'disabled-grey': !Computed_IsSearchFunctionAllowed() } " id="IsParticipating" name="IsParticipating" type="checkbox" value="true" class="">
					Reporting Data
				</label>
			</div>
		</div>
	</section>
	<footer class="search-panel-footer CS_col-xs-12 collapsable">
		<a class="bg_primary-2 br_radius btn c_white float_right h:bg_primary h:shadow shadow_2" data-bind="click: Behavior_SearchHospitals, css: { 'disabled-grey': !Computed_IsSearchFunctionAllowed() }">Search
			<i class="icon-search icon-white"></i></a>
	</footer>
</fieldset>
Copy Code