<div class="modal fade bg_black-4 z_5 show font_UI block relative" id="modal-attachment" tabindex="-1" role="dialog" aria-labelledby="attachmenteModalLabel" aria-modal="true" >
<div class="br_radius modal-dialog z_5 shadow_bevel-bold" role="document">
    <div class="br-tl_radius br-tr_radius br_radius modal-content">
      <div class="br-b_1 br_black-3 br_solid flex justify_center modal-header bg_primary c_white">
        <h5 class="c_white flex_auto font_1 font_medium font_display m_0 modal-title self_center" id="exampleModalLabel"> <i class="far fa-paperclip"></i>  Attachments</h5>
        <button type="button" class=" btn btn-secondary c_white close h:c_white h:opacity lh_0 self_center" data-dismiss="modal" aria-label="Close">
          <i class="fa-times fas"></i>
        </button>
      </div>
      <div class="modal-body p_0">
        <ul class="ul_none">
            <li class="br-b_1 br_dotted br_primary-3 flex h:bg_highlight-5 h_lh1 p-x_3 p-y_3 relative"><span class="flex_auto font_0 lh_2 p-x_4 self_center">Really long name of a files so the text might wrap because we can never keep titles short and we have to medically explain everything.</span><button class="bg_black-3 br_0 br_square c_white expanded-click-area flex_none h:bg_black-5 m-l_auto m-r_n3 m-y_n3" style=" width: 4em;"><i class="fas fa-download"></i></button></li>
         <li class="br-b_1 br_dotted br_primary-3 flex h:bg_highlight-5 h_lh1 p-x_3 p-y_3 relative"><span class="flex_auto font_0 lh_2 p-x_4 self_center">lorem text link</span>
         <button class="bg_black-3 br_0 br_square c_white expanded-click-area flex_none h:bg_black-5 m-l_auto m-r_n3 m-y_n3" style=" width: 4em;"><i class="fas fa-download"></i></button></li>
        </ul>
      </div>
      <div class="br-bl_radius br-br_radius br_black-3 modal-footer p_3 relative">
        <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close"><i class="fa-times fas"></i> Close</button>
      </div>
    </div>
  </div>
</div>