Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

4.4 Faculty Card

The Faculty Card pattern displays key leadership or team member information in a compact, visually distinct format. It includes a profile image, full name, credentials, and role. This component is ideal for highlighting individuals on leadership, committee, or speaker pages. The role text is styled to stand out for quick scanning, and consistent spacing maintains alignment across multiple cards. The profile image is left-aligned with rounded corners for approachability, while the right column provides text hierarchy with emphasis on the role title.

Sub.Data.Member.Photo - Photo Sub.Data.Member.FullName - Full Name Sub.Data.Member.Role - Role
Sub Components in Design:

    Example

    Default styling

  • Pepper H. Soda III, MD, FACC
    Pepper H. Soda III, MD, FACC Chair
    • FORMAT:
    The container of the cards should constrain the cards to less then 350px because any larger the design starts to fall apart. Images are 300px by 300px.
    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. 
    <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>
    Copy Code