Arches: CardioSmart

Arches:CardioSmart

Multi Product Brand Style System by the American College of Cardiology

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