Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_boot.css, line 12397

4.4.1 Faculty List

The Faculty List pattern displays a collection of faculty members in a grid layout. Each faculty member is represented by a card that includes their profile image, full name, and role. This component is ideal for showcasing multiple individuals in a visually consistent and accessible manner.

Recipes.Faculty - Faculty Card
Sub Components in Design:
    Sub.ClassList.Grid.Card.Split-Triple - Grid Triple Card Holder
    Data Elements:

      Example

      Default styling

      • Pepper H. Soda III, MD, FACC
        Pepper H. Soda III, MD, FACC Chair
      • Pepper H. Soda III, MD, FACC
        Pepper H. Soda III, MD, FACC Chair
      • Pepper H. Soda III, MD, FACC
        Pepper H. Soda III, MD, FACC Chair
      NOTE:
      This pattern can be used within a grid or flex layout to create a roster of faculty members. The design requires to be wrapped in a .wrapper-container class to ensure proper sizing in various contexts. 
      <ul class="columns_1 columns_2:md columns_3:lg gap_4:md gap_3 grid justify_center ul_none wrapper-container">
<li class="wrapper-container bg_white m_0 p_2 br_1 br_black-3 br_round br_solid grid columns_2 gap_0 items_start justify_start shadow_overlap-light">
  <div class="p_3 p-b_0 p_4:md p-r_0:sm p_3:sm grid items_center justify_center col_all col-end_n2:sm"><img
    class="aspect_1x1 w_100 aspect_8x10:sm bg_cover br_radius max-w_20 br_1 br_solid br_black-2"
    src="https://i.pravatar.cc/300"
    alt="Pepper H. Soda III, MD, FACC"
/></div>
  <div class="col-start_n2:sm col_all font_0:sm font_1:md font_2:lg font_n1:xs font_n2 lh_2 p-x_4:md p-y_4:md p-y_4:sm p_3">
    <span class="font_display font-size_up-1 c_secondary-n2 lh_1">Pepper H. Soda III, MD, FACC</span>
    <strong class="block font-size_down-1 c_primary font_meduim font_ui">Chair</strong>
  </div>
</li><li class="wrapper-container bg_white m_0 p_2 br_1 br_black-3 br_round br_solid grid columns_2 gap_0 items_start justify_start shadow_overlap-light">
  <div class="p_3 p-b_0 p_4:md p-r_0:sm p_3:sm grid items_center justify_center col_all col-end_n2:sm"><img
    class="aspect_1x1 w_100 aspect_8x10:sm bg_cover br_radius max-w_20 br_1 br_solid br_black-2"
    src="https://i.pravatar.cc/300"
    alt="Pepper H. Soda III, MD, FACC"
/></div>
  <div class="col-start_n2:sm col_all font_0:sm font_1:md font_2:lg font_n1:xs font_n2 lh_2 p-x_4:md p-y_4:md p-y_4:sm p_3">
    <span class="font_display font-size_up-1 c_secondary-n2 lh_1">Pepper H. Soda III, MD, FACC</span>
    <strong class="block font-size_down-1 c_primary font_meduim font_ui">Chair</strong>
  </div>
</li><li class="wrapper-container bg_white m_0 p_2 br_1 br_black-3 br_round br_solid grid columns_2 gap_0 items_start justify_start shadow_overlap-light">
  <div class="p_3 p-b_0 p_4:md p-r_0:sm p_3:sm grid items_center justify_center col_all col-end_n2:sm"><img
    class="aspect_1x1 w_100 aspect_8x10:sm bg_cover br_radius max-w_20 br_1 br_solid br_black-2"
    src="https://i.pravatar.cc/300"
    alt="Pepper H. Soda III, MD, FACC"
/></div>
  <div class="col-start_n2:sm col_all font_0:sm font_1:md font_2:lg font_n1:xs font_n2 lh_2 p-x_4:md p-y_4:md p-y_4:sm p_3">
    <span class="font_display font-size_up-1 c_secondary-n2 lh_1">Pepper H. Soda III, MD, FACC</span>
    <strong class="block font-size_down-1 c_primary font_meduim font_ui">Chair</strong>
  </div>
</li>
</ul>
      Copy Code