Arches: CardioSmart

Arches:CardioSmart

Multi Product Brand Style System by the American College of Cardiology

Related Content

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

11 Related Content

There are many components that pull in lists, carousels, and featurd presenetations of other assets and or pages because they are related.

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

11.2.1 Related Carousel

Related Content is a multi bucket area that can be set to filter on Topic and number or elements. When the elements cannot display in the viewport then the area implements a carousel. (Secondary Level Item)

Example

Default styling

Factsheet
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more
Infographic
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more
Patient Story
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more
<div class="flex">
<div class="flex_auto p-x_3">
   <div class="bg_ecg-n1 br_radius h:bg_primary relative min-h_10 shadow_overlap-light c_white " style="">
      <div class="flex flex_row self_stretch" style="min-height: 11rem;">
         <div class="bg_black-2 flex flex_column flex_none justify_around p_4 shadow_n1 text_center">
               <div class="flex_shrink lh_1 self_center">
                  <i class="fa-file-medical-alt fad font_8 m-b_2 fa-fw"></i>
                  <div class="c_white-5 font_n3  text_center">
                     Factsheet
                  </div>
               </div>
         </div>
      <div class="flex flex_column flex_shrink justify_around p-b_5 p_4">
         <div class="flex_shrink">
               <div class="font_1 font_display lh_2 m-b_2 overflow_hidden" style="max-height: 7rem;">Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
               </div>
                  <div class="capitalize font_n1  m-b_2 font_accent:">
                     Accute Heart Failure
                  </div>
               </div>
         </div>
      </div>
      <div class="absolute inline-block b_3 h:opacity opacity_7 r_3 m-r_3">
         <span class="m-r_2 uppercase font_n1 font_ui inline m-t_n2">learn more</span>
         <i class="block fa-arrow-alt-circle-right fas font_0"></i>
      </div>
   </div></div>
   <div class="flex_auto p-x_3">
      <div class="bg_congenital-n1 br_radius h:bg_primary relative min-h_10 shadow_overlap-light c_white " style="">
      <div class="flex flex_row self_stretch" style="min-height: 11rem;">
         <div class="bg_black-2 flex flex_column flex_none justify_around p_4 shadow_n1 text_center">
               <div class="flex_shrink lh_1 self_center">
                  <i class="fa-file-chart-pie fad font_8 m-b_2 fa-fw"></i>
                  <div class="c_white-5 font_n3  text_center">
                     Infographic
                  </div>
               </div>
         </div>
      <div class="flex flex_column flex_shrink justify_around p-b_5 p_4">
         <div class="flex_shrink">
               <div class="font_1 font_display lh_2 m-b_2 overflow_hidden" style="max-height: 7rem;">Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
               </div>
                  <div class="capitalize font_n1  m-b_2 font_accent:">
                     Accute Heart Failure
                  </div>
               </div>
         </div>
      </div>
      <div class="absolute inline-block b_3 h:opacity opacity_7 r_3 m-r_3">
         <span class="m-r_2 uppercase font_n1 font_ui inline m-t_n2">learn more</span>
         <i class="block fa-arrow-alt-circle-right fas font_0"></i>
      </div>
   </div>
   </div>
   <div class="flex_auto p-x_3">
      <div class="bg_prevention br_radius h:bg_primary relative min-h_10 shadow_overlap-light c_white " style="">
      <div class="flex flex_row self_stretch" style="min-height: 11rem;">
         <div class="bg_black-2 flex flex_column flex_none justify_around p_4 shadow_n1 text_center">
               <div class="flex_shrink lh_1 self_center">
                  <i class="fa-comments-alt fad font_8 m-b_2 fa-fw"></i>
                  <div class="c_white-5 font_n3  text_center">
                     Patient Story
                  </div>
               </div>
         </div>
      <div class="flex flex_column flex_shrink justify_around p-b_5 p_4">
         <div class="flex_shrink">
               <div class="font_1 font_display lh_2 m-b_2 overflow_hidden" style="max-height: 7rem;">Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
               </div>
                  <div class="capitalize font_n1 m-b_2 font_accent:">
                     Accute Heart Failure
                  </div>
               </div>
         </div>
      </div>
      <div class="absolute inline-block b_3 h:opacity opacity_7 r_3 m-r_3">
         <span class="m-r_2 uppercase font_n1 font_ui inline m-t_n2">learn more</span>
         <i class="block fa-arrow-alt-circle-right fas font_0"></i>
      </div>
   </div>
</div>
</div>
Copy Code

Example s

.bg_acute

Acute Coronary Syndromes CAD, PAD

Generic article
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.bg_arrhythmias

arrhythmias and Clinical EP Atrial Fibulation, Bradycardia, Supraventricular Tachycardia

Generic article
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.bg_congenital-n1

#fdb918 Congenital Heart Disease:Congenital Heart Defects

Generic article
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.bg_ecg-n1

#d9691f Standard ECG, Stress Test

Generic article
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.bg_vascular

#ae171c Vascular Medicine Aortic Aneurysm, Peripheral Artery Disease, Renal Artery Disease, Subclavian Artery Disease,Varicose Veins

Generic article
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.bg_prevention

#a01d51 Prevention High blood presure

Generic article
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.bg_hf

#410d49 Heart Failure Heart Valve Disease, Aortic Stenosis, Mitral Regurgitation

Generic article
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.bg_valvular

#4f4190 Valvular Heart Disease Heart Valve Disease,Aortic Stenosis,Mitral Regurgitation

Generic article
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.bg_ischemic

#0f3e65 Stable ischemic Heart Disease

Generic article
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.bg_secondary

Diabetes, Diabetes and Your Heart, Metabolic Syndrome

Generic article
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.bg_shade-n2

Angina, Endocarditis, Heart Attack, Stroke, Sudden Cardiac Arrest, Sudden Cardiac Arrest and Sports, Cardio-oncology, Geriatric Cardiology, Cardiac Rehab

Generic article
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.bg_invasive-3

#c8b02f Invasive Cardiology Angiography and Intervention

Generic article
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.bg_noninvasive-3

#947b33 Noninvasive Cardiology

Generic article
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.bg_pulmonary-3

#d60e7e Pulmonary Hypertension and Venous Thromboembolic Disease

Generic article
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.bg_pericardial-3

#0079ad pericardial Disease

Generic article
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.bg_special-3

#00b6f1 Special

Generic article
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more
<div class="[modifier class] br_radius h:bg_primary relative min-h_10 shadow_overlap-light c_white" style="">
	<div class="flex flex_row self_stretch" style="min-height: 11rem;">
        <div class="bg_black-2 flex flex_column flex_none justify_around p_4 shadow_n1 text_center">
            <div class="flex_shrink lh_1 self_center">
                <i class="fa-calculator fad font_8 m-b_2 fa-fw"></i>
                <div class="c_white-5 font_n3  text_center">
                    Generic article
                </div>
            </div>
        </div>
    <div class="flex flex_column flex_shrink justify_around p-b_5 p_4">
        <div class="flex_shrink">
            <div class="font_1 font_display lh_2 m-b_2 overflow_hidden" style="max-height: 7rem;">Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
            </div>
                <div class="capitalize font_n1  m-b_2 font_accent:">
                    Accute Heart Failure
                </div>
            </div>
        </div>
    </div>
    <div class="absolute inline-block b_3 h:opacity opacity_7 r_3 m-r_3">
        <span class="m-r_2 uppercase font_n1 font_ui inline m-t_n2">learn more</span>
        <i class="block fa-arrow-alt-circle-right fas font_0"></i>
    </div>
</div>
Copy Code

Example s

.fa-file-medical-alt

Generic article (file-medical-alt)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-newspaper

News article (newspaper)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-hospital-user

Patient/survivor story (address-card) (hospital-user) (file user)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-file-chart-pie

Infographics (file-chart-pie)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-ballot-check

Fact Sheet (ballot-check) (file-spreadsheet)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-comments-alt

Discussion Guide (user-md-chat)(comments-alt)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-file-signature

Action Plan (file-signature)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-sitemap

Decision Aid (sitemap) (code-branch)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-calculator

Risk Calculator (calculator)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-photo-video

Video (photo-video)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-book-heart

Generic Prevention (heart) (book-heart)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-utensils-alt

Eat Better (utensils-alt)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-weight

Lose Weight (weight)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-walking

Move More (walking) (running)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-alarm-snooze

Relax (alarm-snooze) (spa)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-smoking-ban

Stop Smoking (smoking-ban)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-clipboard-user

Manage Your Health (clipboard check) (clipboard-user)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-prescription-bottle-alt

Medication Adherence (prescription-bottle)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-hand-holding-heart

Caregivers (hand-holding-heart) (user-friends)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more

.fa-users-medical

Editor in chief/Editorial Board (users-medical)

The Object Type Label
Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
Accute Heart Failure
learn more
<div class="bg_ecg-n1 br_radius h:bg_primary relative min-h_10 shadow_overlap-light max-w_30 c_white " style="">
	<div class="flex flex_row self_stretch" style="min-height: 11rem;">
        <div class="bg_black-2 flex flex_column flex_none justify_around p_4 shadow_n1 text_center">
            <div class="flex_shrink lh_1 self_center">
                <i class="[modifier class] fad font_8 m-b_2 fa-fw"></i>
                <div class="c_white-5 font_n3  text_center">
                    The Object Type Label
                </div>
            </div>
        </div>
    <div class="flex flex_column flex_shrink justify_around p-b_5 p_4">
        <div class="flex_shrink">
            <div class="font_1 font_display lh_2 m-b_2 overflow_hidden" style="max-height: 7rem;">Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival
            </div>
                <div class="capitalize font_n1  m-b_2 font_accent:">
                    Accute Heart Failure
                </div>
            </div>
        </div>
    </div>
    <div class="absolute inline-block b_3 h:opacity opacity_7 r_3 m-r_3">
        <span class="m-r_2 uppercase font_n1 font_ui inline m-t_n2">learn more</span>
        <i class="block fa-arrow-alt-circle-right fas font_0"></i>
    </div>
</div>
Copy Code

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

11.4.1 Related Topics

Related Topics is a list of topics that can be related to the current topic. (Primary Level Item)

<nav class="font_0  flex_auto font_ui p-t_2 p-t_3:lg m-b_4 max-w_40">
   <h2
      class="capitalize br-b_1 br_dotted br_accent c_accent font_bold font_0 font_1:lg font_display m-b_0 m-t_0 p-b_2 p-t_3 p-x_4">
      Related Topics
   </h2>
   <ul class="font_0:lg font_n1 lh_2 ul_none">
      <li class="flex flex_row-reverse p_2 h:bg_secondary-5 relative">
         <div class="flex flex_column flex_none justify_around">
            <div class="bg_black-2 font_1 p_2 p-x_3 br_radius">
               <i class="fas fa-arrow-alt-to-right p-y_2 inline-block fa-fw c_black-7"
                  data-attr="tool-type"></i>
            </div>
         </div>
         <div class="flex_auto p-x_4 flex_column flex justify_around" data-attr="tool name">
            <a href="#"
               class="link flex_shrink c_primary h:c_primary-n2 h:underline-none m_0 lh_1 expanded-click-area lh_1">Angina
            </a>
         </div>
      </li>
      <li class="flex flex_row-reverse p_2 h:bg_secondary-5 relative br-t_1 br_dotted br_secondary-4">
         <div class="flex flex_column flex_none justify_around">
            <div class="bg_black-2 font_1 p_2 p-x_3 br_radius">
               <i class="fas fa-arrow-alt-to-right p-y_2 inline-block fa-fw c_black-7"
                  data-attr="tool-type"></i>
            </div>
         </div>
         <div class="flex_auto p-x_4 flex_column flex justify_around" data-attr="tool name">
            <a href="#"
               class="link flex_shrink c_primary h:c_primary-n2 h:underline-none m_0 lh_1 expanded-click-area lh_1">Aortic
               Aneurysm
            </a>
         </div>
      </li>
      <li class="flex flex_row-reverse p_2 h:bg_secondary-5 relative br-t_1 br_dotted br_secondary-4">
         <div class="flex flex_column flex_none justify_around">
            <div class="bg_black-2 font_1 p_2 p-x_3 br_radius">
               <i class="fas fa-arrow-alt-to-right p-y_2 inline-block fa-fw c_black-7"
                  data-attr="tool-type"></i>
            </div>
         </div>
         <div class="flex_auto p-x_4 flex_column flex justify_around" data-attr="tool name">
            <a href="#"
               class="link flex_shrink c_primary h:c_primary-n2 h:underline-none m_0 lh_1 expanded-click-area lh_1">Atrial
               Fibrillation
            </a>
         </div>
      </li>
   </ul>
</nav>
Copy Code

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

11.4.2 Related Tools

Related Tools is a list of tools related to the current topics (Secondary Level Item)

<nav class="font_0  flex_auto font_ui p-t_2 p-t_3:lg m-b_4 max-w_40">
   <h2
      class="capitalize br-b_1 br_dotted br_accent c_accent font_bold font_0 font_1:lg font_display m-b_0 m-t_0 p-b_2 p-t_3 p-x_4">
      featured tools
   </h2>
   <ul class="font_0:lg font_n1 lh_2 ul_none">
      <li class="flex p_2 h:bg_secondary-5 relative">
         <div class="flex flex_column flex_none justify_around">
            <div class="bg_black-2 font_1 p_2 p-x_3 br_radius">
               <i class="fas fa-file p-y_2 inline-block fa-fw c_black-7" data-attr="tool-type"></i>
            </div>
         </div>
         <div class="flex_auto p-x_4 flex_column flex justify_around" data-attr="tool name">
            <a href="#"
               class="link flex_shrink h:underline-none m_0 lh_1 expanded-click-area lh_1  c_primary h:c_primary-n2 ">The
               title of the tool which can be very long
            </a>
         </div>
      </li>
      <li class="flex p_2 h:bg_secondary-5 relative br-t_1 br_dotted br_secondary-4">
         <div class="flex flex_column flex_none justify_around">
            <div class="bg_black-2 font_1 p_2 p-x_3 br_radius">
               <i class="fas fa-prescription-bottle-alt p-y_2 inline-block fa-fw c_black-7"
                  data-attr="tool-type"></i>
            </div>
         </div>
         <div class="flex_auto p-x_4 flex_column flex justify_around" data-attr="tool name">
            <a href="#"
               class="link flex_shrink h:underline-none m_0 lh_1 expanded-click-area lh_1  c_primary h:c_primary-n2 ">The
               some other tools that has meaning
            </a>
         </div>
      </li>
   </ul>
   <a class="block br-t_1 br_0 br_dotted br_none br_accent c_primary float_right font_n1 link p-x_3 p_2 text_right w_100"
      href="#"><i class="fas fa-plus-square p-r_3 "></i>show more tools</a>
</nav>
Copy Code

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

11.4.3 Related Decision Tools

A curated list of patient tools or decision page that can be added with short title and link. Expander should be added if list exceeds X.(Secondary Level Item)

<nav class="font_0  flex_auto font_ui p-t_2 p-t_3:lg m-b_4 max-w_40">
   <h2
      class="capitalize br-b_1 br_dotted br_accent c_accent font_bold font_0 font_1:lg font_display m-b_0 m-t_0 p-b_2 p-t_3 p-x_4">
      Shared Decision Making
   </h2>
   <ul class="font_0:lg font_n1 lh_2 ul_none">
      <li class="flex p_2 h:bg_secondary-5 relative">
         <div class="flex flex_column flex_none justify_around">
            <div class="bg_black-2 font_1 p_2 p-x_3 br_radius">
               <i class="fas fa-user-md-chat p-y_2 inline-block fa-fw c_black-7" data-attr="tool-type"></i>
            </div>
         </div>
         <div class="flex_auto p-x_4 flex_column flex justify_around" data-attr="tool name">
            <a href="#"
               class="link flex_shrink h:underline-none m_0 lh_1 expanded-click-area lh_1  c_primary h:c_primary-n2 ">Talking to your doctor about your drug options
            </a>
         </div>
      </li>
      <li class="flex p_2 h:bg_secondary-5 relative br-t_1 br_dotted br_secondary-4">
         <div class="flex flex_column flex_none justify_around">
            <div class="bg_black-2 font_1 p_2 p-x_3 br_radius">
               <i class="fas fa-user-md-chat p-y_2 inline-block fa-fw c_black-7"
                  data-attr="tool-type"></i>
            </div>
         </div>
         <div class="flex_auto p-x_4 flex_column flex justify_around" data-attr="tool name">
            <a href="#"
               class="link flex_shrink h:underline-none m_0 lh_1 expanded-click-area lh_1  c_primary h:c_primary-n2 ">Becoming a better partner with in your own health
            </a>
         </div>
      </li>
   </ul>
   <a class="block br-t_1 br_0 br_dotted br_none br_accent c_primary float_right font_n1 link p-x_3 p_2 text_right w_100"
      href="#"><i class="fas fa-plus-square p-r_3 "></i>show more tools</a>
</nav>
Copy Code