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 8782
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 8475
A featured tool is a single selected asset from the asset library. (Secondary Level Item)
<aside class="max-w_35 bg_primary-n1 br_1 br_white-4 br_solid m-b_4 p_4 font_0 relative p-t_5 br-br_radius br-bl_radius c_white">
<div class="br-t_3 br_solid br_black-5 text_left absolute t_0 r_0 l_0 font_n2 c_white font_ui font_xbold">
<ul class="ul_none flex flex_row-reverse ">
<li class="flex_shrink bg_black-5 p-x_3 p-y_1">
Older Adults & Heart Disease
</li>
<li class="flex_shrink bg_black-3 p-x_3 p-y_1 br-bl_radius">
Checklist
</li>
</ul>
</div>
<div class="relative text_center ">
<div class="p-x_4 p-y_4 inline-block w_auto bg_black-3 c_white font_8 shadow_overlap-bold br_2 br_solid br_white-5">
<i class="fad fa-tasks p-y_3 p-x_2"></i>
</div>
<header class="font_display font_2 m-y_3 block">
<a href="#" class="link c_white expanded-click-area">Self-Care Checklist</a>
</header>
</div>
<footer class="font_ui text_center font_0 capitalize">
<ul class="ul_none flex justify_center br_white-2 br_solid br_1 m-b_n4 m-x_n4 font_n1">
<li class="flex_auto p-x_3 p-y_2 br-r_1 br_solid br_black-2 relative h:bg_black-3">
<a href="#" class="link c_white expanded-click-area"><i class="fas fa-arrow-down"></i>
download
</a>
</li>
<li class="flex_auto p-x_3 p-y_2 relative h:bg_black-3">
<a href="#" class="link c_white expanded-click-area"><i class="fas fa-share"></i>
share</a>
</li>
</ul>
</footer>
</aside>
Source: dist/css/cardiosmart_boot.css, line 8558
A featured tool is a single selected asset from the asset library. (Secondary Level Item)
<aside class="bg_white br-bl_radius br-br_radius br_1 br_primary-3 br_solid c_primary-n3 font_0 m-b_4 max-w_35 p-t_5 p_4 relative shadow_bevel-light">
<div class="br-t_3 br_solid br_primary-n2 text_left absolute t_0 r_0 l_0 font_n2 c_white font_ui font_xbold">
<ul class="ul_none flex flex_row-reverse ">
<li class="flex_shrink bg_primary-n2 p-x_3 p-y_1"> Older Adults & Heart Disease </li>
<li class="flex_shrink bg_primary-1 p-x_3 p-y_1 br-bl_radius"> Checklist </li>
</ul>
</div>
<div class="relative text_center ">
<div class="p-x_4 p-y_4 inline-block w_auto bg_primary c_white font_8 shadow_overlap-bold br_2 br_solid br_white-3">
<i class="fad fa-tasks p-y_3 p-x_2"></i>
</div>
<header class="font_display font_2 m-y_3 block">
<a href="#" class="link expanded-click-area">Self-Care Checklist</a>
</header>
</div>
<footer class="capitalize font_0 font_ui text_center">
<ul class="bg_primary-5 br_1 br_primary-3 br_solid flex font_n1 justify_center m-b_n4 m-x_n4 ul_none">
<li class="flex_auto p-x_3 p-y_2 br-r_1 br_solid br_primary-3 relative h:bg_primary-4">
<a href="#" class="link expanded-click-area"><i class="fas fa-arrow-down"></i> download </a>
</li>
<li class="flex_auto p-x_3 p-y_2 relative h:bg_primary-4">
<a href="#" class="link expanded-click-area"><i class="fas fa-share"></i> share</a>
</li>
</ul>
</footer>
</aside>
Source: dist/css/cardiosmart_boot.css, line 8520
A featured tool is a single selected asset from the asset library. (Secondary Level Item)
<aside class="bg_white br-bl_radius br-br_radius br_1 br_shade-3 br_solid c_shade-n3 font_0 m-b_4 max-w_35 p-t_5 p_4 relative shadow_bevel-light">
<div class="br-t_3 br_solid br_primary-n2 text_left absolute t_0 r_0 l_0 font_n2 c_white font_ui font_xbold">
<ul class="ul_none flex flex_row-reverse ">
<li class="flex_shrink bg_primary-n2 p-x_3 p-y_1"> Older Adults & Heart Disease </li>
<li class="flex_shrink bg_primary-1 p-x_3 p-y_1 br-bl_radius"> Checklist </li>
</ul>
</div>
<div class="relative text_center ">
<div class="p-x_4 p-y_4 inline-block w_auto bg_primary c_white font_8 shadow_overlap-bold br_2 br_solid br_white-3">
<i class="fad fa-tasks p-y_3 p-x_2"></i>
</div>
<header class="font_display font_2 m-y_3 block">
<a href="#" class="link expanded-click-area">Self-Care Checklist</a>
</header>
</div>
<footer class="capitalize font_0 font_ui text_center">
<ul class="bg_shade-5 br_1 br_shade-3 br_solid flex font_n1 justify_center m-b_n4 m-x_n4 ul_none">
<li class="flex_auto p-x_3 p-y_2 br-r_1 br_solid br_shade-3 relative h:bg_shade-4">
<a href="#" class="link expanded-click-area"><i class="fas fa-arrow-down"></i> download </a>
</li>
<li class="flex_auto p-x_3 p-y_2 relative h:bg_shade-4">
<a href="#" class="link expanded-click-area"><i class="fas fa-share"></i> share</a>
</li>
</ul>
</footer>
</aside>
Source: dist/css/cardiosmart_boot.css, line 8596
A featured tool is a single selected asset from the asset library. (Secondary Level Item)
<aside class="bg_white br_radius br_1 br_shade-3 br_solid c_shade-n3 font_0 m-b_4 max-w_35 p-t_5 p_4 relative shadow_bevel-light">
<div class="relative text_center ">
<div class="p-x_4 p-y_4 inline-block w_auto bg_primary c_white font_8 shadow_overlap-bold br_2 br_solid br_white-3">
<i class="fad fa-tasks p-y_3 p-x_2"></i>
</div>
<header class="font_display font_2 m-y_3 block">
<a href="#" class="link expanded-click-area">Self-Care Checklist</a>
</header>
</div>
<footer class="capitalize font_0 font_ui text_center">
<ul class="bg_shade-5 br_1 br_shade-3 br_solid flex font_n1 justify_center m-b_n4 m-x_n4 ul_none">
<li class="flex_auto p-x_3 p-y_2 br-r_1 br_solid br_shade-3 relative h:bg_shade-4">
<a href="#" class="link expanded-click-area"><i class="fas fa-arrow-down"></i> download </a>
</li>
<li class="flex_auto p-x_3 p-y_2 relative h:bg_shade-4">
<a href="#" class="link expanded-click-area"><i class="fas fa-share"></i> share</a>
</li>
</ul>
</footer>
</aside>
Source: dist/css/cardiosmart_boot.css, line 8265
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)
<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>
Source: dist/css/cardiosmart_boot.css, line 8358
Description: New Items on the site use the colors of the pathways to enrich the page with some color details.
Acute Coronary Syndromes CAD, PAD
arrhythmias and Clinical EP Atrial Fibulation, Bradycardia, Supraventricular Tachycardia
#fdb918 Congenital Heart Disease:Congenital Heart Defects
#d9691f Standard ECG, Stress Test
#ae171c Vascular Medicine Aortic Aneurysm, Peripheral Artery Disease, Renal Artery Disease, Subclavian Artery Disease,Varicose Veins
#a01d51 Prevention High blood presure
#410d49 Heart Failure Heart Valve Disease, Aortic Stenosis, Mitral Regurgitation
#4f4190 Valvular Heart Disease Heart Valve Disease,Aortic Stenosis,Mitral Regurgitation
#0f3e65 Stable ischemic Heart Disease
Diabetes, Diabetes and Your Heart, Metabolic Syndrome
Angina, Endocarditis, Heart Attack, Stroke, Sudden Cardiac Arrest, Sudden Cardiac Arrest and Sports, Cardio-oncology, Geriatric Cardiology, Cardiac Rehab
#c8b02f Invasive Cardiology Angiography and Intervention
#947b33 Noninvasive Cardiology
#d60e7e Pulmonary Hypertension and Venous Thromboembolic Disease
#0079ad pericardial Disease
#00b6f1 Special
<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>
Source: dist/css/cardiosmart_boot.css, line 8416
Description: New Items on the site use the colors of the pathways to enrich the page with some color details.
Generic article (file-medical-alt)
News article (newspaper)
Patient/survivor story (address-card) (hospital-user) (file user)
Infographics (file-chart-pie)
Fact Sheet (ballot-check) (file-spreadsheet)
Discussion Guide (user-md-chat)(comments-alt)
Action Plan (file-signature)
Decision Aid (sitemap) (code-branch)
Risk Calculator (calculator)
Video (photo-video)
Generic Prevention (heart) (book-heart)
Eat Better (utensils-alt)
Lose Weight (weight)
Move More (walking) (running)
Relax (alarm-snooze) (spa)
Stop Smoking (smoking-ban)
Manage Your Health (clipboard check) (clipboard-user)
Medication Adherence (prescription-bottle)
Caregivers (hand-holding-heart) (user-friends)
Editor in chief/Editorial Board (users-medical)
<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>
Source: dist/css/cardiosmart_boot.css, line 8628
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>
Source: dist/css/cardiosmart_boot.css, line 8688
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>
Source: dist/css/cardiosmart_boot.css, line 8736
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>