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

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.

11.1 RecipesRelated.Featured

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

11.1.1 Featured Tool Color Dark (1.01.01-C)

A featured tool is a single selected asset from the asset library. (Secondary Level Item)

Example

<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 &amp; 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>

<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 &amp; 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>

Code Sample

Copy Code

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

11.1.2 Featured Tool Color Light

A featured tool is a single selected asset from the asset library. (Secondary Level Item)

Example

<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 &amp; 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>

<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 &amp; 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>

Code Sample

Copy Code

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

11.1.3 Featured Tool Grey

A featured tool is a single selected asset from the asset library. (Secondary Level Item)

Example

<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 &amp; 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>

<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 &amp; 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>

Code Sample

Copy Code

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

11.1.4 Featured Tool without Type Labels

A featured tool is a single selected asset from the asset library. (Secondary Level Item)

Example

<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>

<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>

Code Sample

Copy Code

11.2 RecipesRelated.Group

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

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

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>

<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>

Code Sample

Copy Code

11.3 RecipesRelated.Item

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

11.3.1 Related Content Item (Pathway Colors)

Description: New Items on the site use the colors of the pathways to enrich the page with some color details.

Example s

Default styling

Generic article

Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival

Accute Heart Failure

learn more

.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>

<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>

Code Sample

Copy Code

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

11.3.2 Related Content Item (Content Icons)

Description: New Items on the site use the colors of the pathways to enrich the page with some color details.

Example s

Default styling

The Object Type Label

Receiving a Heart Transplant in Your Region's Leading Center Can Improve Survival

Accute Heart Failure

learn more

.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>

<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>

Code Sample

Copy Code

11.4 RecipesRelated.Page

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

11.4.1 Related Topics

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

Example

<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>

<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>

Code Sample

Copy Code

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

11.4.2 Related Tools

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

Example

<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>

<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>

Code Sample

Copy Code

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

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)

Example

<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>

<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>

Code Sample

Copy Code

This Documentation is Moved!

Related Content

11.1 RecipesRelated.Featured

11.1.1 Featured Tool Color Dark (1.01.01-C)

Example

11.1.2 Featured Tool Color Light

Example

11.1.3 Featured Tool Grey

Example

11.1.4 Featured Tool without Type Labels

Example

11.2 RecipesRelated.Group

11.2.1 Related Carousel

Example

11.3 RecipesRelated.Item

11.3.1 Related Content Item (Pathway Colors)

Example s

Default styling

.bg_acute

.bg_arrhythmias

.bg_congenital-n1

.bg_ecg-n1

.bg_vascular

.bg_prevention

.bg_hf

.bg_valvular

.bg_ischemic

.bg_secondary

.bg_shade-n2

.bg_invasive-3

.bg_noninvasive-3

.bg_pulmonary-3

.bg_pericardial-3

.bg_special-3

11.3.2 Related Content Item (Content Icons)

Example s

Default styling

.fa-file-medical-alt

.fa-newspaper

.fa-hospital-user

.fa-file-chart-pie

.fa-ballot-check

.fa-comments-alt

.fa-file-signature

.fa-sitemap

.fa-calculator

.fa-photo-video

.fa-book-heart

.fa-utensils-alt

.fa-weight

.fa-walking

.fa-alarm-snooze

.fa-smoking-ban

.fa-clipboard-user

.fa-prescription-bottle-alt

.fa-hand-holding-heart

.fa-users-medical

11.4 RecipesRelated.Page

11.4.1 Related Topics

Example

11.4.2 Related Tools

Example

11.4.3 Related Decision Tools

Example