Arches: CardioSmart

Arches:CardioSmart

Multi Product Brand Style System by the American College of Cardiology

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