<div class="modal fade" id="mdl01" aria-labelledby="mdl01" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="mdl01">
          <i class="icon-block dga-icon md light brand rounded dga-arrow-data-transfer-diagonalStrokeRounded-solid"></i>
            عنوان الجزئية
          </h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        يأتي تفاصيل الجزء هنا مع مساحة جيدة للمحتوى
      </div>
      <div class="modal-footer">
        <div class="action-item first">
          <button type="button" class="dga-btn btn-md dga-secondary-outline" data-bs-dismiss="modal">إجراء</button>
        </div>
        <div class="action-item end">
          <button type="button" class="dga-btn btn-md dga-secondary-outline" data-bs-dismiss="modal">إجراء</button>
          <button type="button" class="dga-btn btn-md dga-neutral" data-bs-dismiss="modal">إجراء</button>
        </div>
      </div>
    </div>
  </div>
</div>