case-actions.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Case Actions Building block</title>

  <!-- CSS for Knowledge Worker pages -->
  <link href="css/kie-main-kw.css" rel="stylesheet" media="screen, print">

  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <!-- Bootstrap JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- Patternfly JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.23.1/js/patternfly.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>

</head>
<body>

<div class="cards-pf">
  <div class="container-cards-pf">
    <div class="row row-cards-pf">

      <!-- task actions card -->
      <div class="col-xs-12 col-sm-12 col-md-9 ">
        <div class="card-pf">
          <div class="card-pf-heading">
            <div class=" kie-card__toolbar">
              <!-- View All Tasks feature removed -->
              <!--<div class="kie-toolbar__group">-->
              <!--<span>-->
              <!--<a href="" class="card-pf-link-with-icon">-->
              <!--<span class="fa fa-external-link-square glyphicon-resize-full"></span>-->
              <!--View All Tasks </a>-->
              <!--</span>-->
              <!--</div>-->
              <div class="kie-toolbar__group">
                <button type="button" class="btn btn-default">
                  Add
                </button>
                <!--<div class="dropdown dropdown-kebab-pf pull-right">-->
                <!--<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab"-->
                <!--data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">-->
                <!--<span class="fa fa-ellipsis-v"></span>-->
                <!--</button>-->
                <!--<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebab">-->
                <!--<li><a href="#">Action</a></li>-->
                <!--<li><a href="#">Another action</a></li>-->
                <!--<li><a href="#">Something else here</a></li>-->
                <!--<li role="separator" class="divider"></li>-->
                <!--<li><a href="#">Separated link</a></li>-->
                <!--</ul>-->
                <!--</div>-->
              </div>
            </div>
            <h2 class="card-pf-title">
              Task Actions
            </h2>
          </div>
          <div class="card-pf-body ">
            <div class="row">
              <!-- Available task actions -->
              <div class="col-xs-12 col-sm-6 col-lg-4">
                <div>
                  <div class="kie-card-heading--embedded">
                    <h3 class="card-pf-subtitle kie-card__subtitle">
                      <span class="fa fa-flag-o kie-card__subtitle-icon kie-card__subtitle-icon--available"></span>
                      Available
                      <span class="badge">12</span>
                      <!--<div class="dropdown dropdown-kebab-pf pull-right">-->
                      <!--<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab"-->
                      <!--data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">-->
                      <!--<span class="fa fa-ellipsis-v"></span>-->
                      <!--</button>-->
                      <!--<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebab">-->
                      <!--<li><a href="#">Action</a></li>-->
                      <!--<li><a href="#">Another action</a></li>-->
                      <!--<li><a href="#">Something else here</a></li>-->
                      <!--<li role="separator" class="divider"></li>-->
                      <!--<li><a href="#">Separated link</a></li>-->
                      <!--</ul>-->
                      <!--</div>-->

                    </h3>
                  </div>

                  <div class="kie-scrollbox">
                    <div class=" list-group kie-list-view--embedded"><!-- list-view-pf list-view-pf-view -->
                      <div class="list-group-item">
                        <div class="">
                          <div class="dropdown pull-right dropdown-kebab-pf">
                            <button class="btn btn-link dropdown-toggle" type="button" id="kebabEmbedded1"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                              <span class="fa fa-ellipsis-v"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
                              <li><a href="#">Accept</a></li>
                            </ul>
                          </div>
                        </div>

                        <div class="kie-list-group-item-content">
                          <div class="list-view-pf-body">
                            <div class="list-view-pf-description">
                              <div class="list-group-item-heading">
                                Review Document
                              </div>
                              <div class="list-group-item-text">
                                Unassigned
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="">
                          <div class="dropdown pull-right dropdown-kebab-pf">
                            <button class="btn btn-link dropdown-toggle" type="button" id="kebabEmbedded2"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                              <span class="fa fa-ellipsis-v"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
                              <li><a href="#">Accept</a></li>
                            </ul>
                          </div>
                        </div>

                        <div class="kie-list-group-item-content">
                          <div class="list-view-pf-body">
                            <div class="list-view-pf-description">
                              <div class="list-group-item-heading">
                                Collect documents
                              </div>
                              <div class="list-group-item-text">
                                Unassigned
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="">
                          <div class="dropdown pull-right dropdown-kebab-pf dropup">
                            <button class="btn btn-link dropdown-toggle" type="button" id="kebabEmbedded3"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                              <span class="fa fa-ellipsis-v"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
                              <li><a href="#">Accept</a></li>
                            </ul>
                          </div>
                        </div>
                        <div class="kie-list-group-item-content">
                          <div class="list-view-pf-body">
                            <div class="list-view-pf-description">
                              <div class="list-group-item-heading">
                                Approve document
                              </div>
                              <div class="list-group-item-text">
                                Unassigned
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- more items that are below the fold of the list -->
                      <div class="list-group-item">
                        <div class="">
                          <div class="dropdown pull-right dropdown-kebab-pf">
                            <button class="btn btn-link dropdown-toggle" type="button" id="kebabEmbedded4"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                              <span class="fa fa-ellipsis-v"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
                              <li><a href="#">Accept</a></li>
                            </ul>
                          </div>
                        </div>

                        <div class="kie-list-group-item-content">
                          <div class="list-view-pf-body">
                            <div class="list-view-pf-description">
                              <div class="list-group-item-heading">
                                Collect documents
                              </div>
                              <div class="list-group-item-text">
                                Unassigned
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="">
                          <div class="dropdown pull-right dropdown-kebab-pf">
                            <button class="btn btn-link dropdown-toggle" type="button" id="kebabEmbedded5"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                              <span class="fa fa-ellipsis-v"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
                              <li><a href="#">Accept</a></li>
                            </ul>
                          </div>
                        </div>
                        <div class="kie-list-group-item-content">
                          <div class="list-view-pf-body">
                            <div class="list-view-pf-description">
                              <div class="list-group-item-heading">
                                Approve document
                              </div>
                              <div class="list-group-item-text">
                                Unassigned
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="">
                          <div class="dropdown pull-right dropdown-kebab-pf dropup">
                            <button class="btn btn-link dropdown-toggle" type="button" id="kebabEmbedded6"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                              <span class="fa fa-ellipsis-v"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
                              <li><a href="#">Accept</a></li>
                            </ul>
                          </div>
                        </div>

                        <div class="kie-list-group-item-content">
                          <div class="list-view-pf-body">
                            <div class="list-view-pf-description">
                              <div class="list-group-item-heading">
                                Collect documents
                              </div>
                              <div class="list-group-item-text">
                                Unassigned
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>
                  </div><!-- scrollbox -->
                  <div class="kie-list__pagination">
                    <a href="" class=" disabled"><span class="fa fa-chevron-circle-up"></span></a>
                    <a href="" class=""><span class="fa fa-chevron-circle-down"></span></a>
                  </div>
                </div>
              </div>

              <!-- In-progress task actions -->
              <div class="col-xs-12 col-sm-6 col-lg-4">
                <div class="kie-card-heading--embedded">
                  <h3 class="card-pf-subtitle kie-card__subtitle">
                    <span
                        class="fa fa-flag-checkered kie-card__subtitle-icon kie-card__subtitle-icon--inprogress"></span>
                    In-Progress
                    <span class="badge">1</span>
                    <!--<div class="dropdown dropdown-kebab-pf pull-right">-->
                    <!--<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab"-->
                    <!--data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">-->
                    <!--<span class="fa fa-ellipsis-v"></span>-->
                    <!--</button>-->
                    <!--<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebab">-->
                    <!--<li><a href="#">Action</a></li>-->
                    <!--<li><a href="#">Another action</a></li>-->
                    <!--<li><a href="#">Something else here</a></li>-->
                    <!--<li role="separator" class="divider"></li>-->
                    <!--<li><a href="#">Separated link</a></li>-->
                    <!--</ul>-->
                    <!--</div>-->

                  </h3>

                </div>

                <div class="kie-scrollbox">
                  <div class="list-group kie-list-view--embedded">
                    <div class="list-group-item">
                      <!--<div class="">-->
                      <!--<div class="dropdown pull-right dropdown-kebab-pf">-->
                      <!--<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight9" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">-->
                      <!--<span class="fa fa-ellipsis-v"></span>-->
                      <!--</button>-->
                      <!--<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">-->
                      <!--<li><a href="#">Action</a></li>-->
                      <!--<li><a href="#">Another action</a></li>-->
                      <!--<li><a href="#">Something else here</a></li>-->
                      <!--<li role="separator" class="divider"></li>-->
                      <!--<li><a href="#">Separated link</a></li>-->
                      <!--</ul>-->
                      <!--</div>-->
                      <!--</div>-->
                      <!--<div class="kie-list-group-item-content">-->

                      <div class="kie-list-group-item-content">
                        <div class="list-view-pf-body">
                          <div class="list-view-pf-description">
                            <div class="list-group-item-heading">
                              Review other documents
                            </div>
                            <div class="list-group-item-text">
                              2 seconds ago (Aimee)
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Completed task actions -->
              <div class="col-xs-12 col-sm-6 col-lg-4">
                <div class="kie-card-heading--embedded">
                  <h3 class="card-pf-subtitle kie-card__subtitle">
                    <span class="fa fa-flag kie-card__subtitle-icon kie-card__subtitle-icon--complete"></span>
                    Completed
                    <!--<span class="badge">1</span>-->
                  </h3>
                </div>

                <div class="kie-scrollbox">
                  <div class="list-group kie-list-view--embedded">
                    <div class="list-group-item">
                      <!--<div class="">-->
                      <!--<div class="dropdown pull-right dropdown-kebab-pf">-->
                      <!--<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight9" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">-->
                      <!--<span class="fa fa-ellipsis-v"></span>-->
                      <!--</button>-->
                      <!--<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">-->
                      <!--<li><a href="#">Action</a></li>-->
                      <!--<li><a href="#">Another action</a></li>-->
                      <!--<li><a href="#">Something else here</a></li>-->
                      <!--<li role="separator" class="divider"></li>-->
                      <!--<li><a href="#">Separated link</a></li>-->
                      <!--</ul>-->
                      <!--</div>-->
                      <!--</div>-->
                      <!--<div class="kie-list-group-item-content">-->

                      <div class="kie-list-group-item-content">
                        <div class="list-view-pf-body">
                          <div class="list-view-pf-description">
                            <div class="list-group-item-heading">
                              Reconcile payments
                            </div>
                            <div class="list-group-item-text">
                              2 days ago (Deepak)
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

      <!-- VARIATION WITH LOADING/NO DATA -->
      <!-- task actions card -->
      <div class="col-xs-12 col-sm-12 col-md-9 ">
        <div class="card-pf">
          <div class="card-pf-heading">
            <div class=" kie-card__toolbar">
              <!-- View All Tasks feature removed -->
              <!--<div class="kie-toolbar__group">-->
              <!--<span>-->
              <!--<a href="" class="card-pf-link-with-icon">-->
              <!--<span class="fa fa-external-link-square glyphicon-resize-full"></span>-->
              <!--View All Tasks </a>-->
              <!--</span>-->
              <!--</div>-->
              <div class="kie-toolbar__group">
                <button type="button" class="btn btn-default">
                  Add
                </button>
                <!--<div class="dropdown dropdown-kebab-pf pull-right">-->
                <!--<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab"-->
                <!--data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">-->
                <!--<span class="fa fa-ellipsis-v"></span>-->
                <!--</button>-->
                <!--<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebab">-->
                <!--<li><a href="#">Action</a></li>-->
                <!--<li><a href="#">Another action</a></li>-->
                <!--<li><a href="#">Something else here</a></li>-->
                <!--<li role="separator" class="divider"></li>-->
                <!--<li><a href="#">Separated link</a></li>-->
                <!--</ul>-->
                <!--</div>-->
              </div>
            </div>
            <h2 class="card-pf-title">
              Task Actions
            </h2>
          </div>
          <div class="card-pf-body ">
            <div class="row">
              <!-- Available task actions -->
              <div class="col-xs-12 col-sm-6 col-lg-4">
                <div>
                  <div class="kie-card-heading--embedded">
                    <h3 class="card-pf-subtitle kie-card__subtitle">
                      <span class="fa fa-flag-o kie-card__subtitle-icon kie-card__subtitle-icon--available"></span>
                      Available
                      <span class="badge">12</span>
                      <!--<div class="dropdown dropdown-kebab-pf pull-right">-->
                      <!--<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab"-->
                      <!--data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">-->
                      <!--<span class="fa fa-ellipsis-v"></span>-->
                      <!--</button>-->
                      <!--<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebab">-->
                      <!--<li><a href="#">Action</a></li>-->
                      <!--<li><a href="#">Another action</a></li>-->
                      <!--<li><a href="#">Something else here</a></li>-->
                      <!--<li role="separator" class="divider"></li>-->
                      <!--<li><a href="#">Separated link</a></li>-->
                      <!--</ul>-->
                      <!--</div>-->

                    </h3>
                  </div>

                  <div class="kie-scrollbox">
                    <div class=" list-group kie-list-view--embedded"><!-- list-view-pf list-view-pf-view -->
                      <div class="list-group-item">
                        <div class="">
                          <div class="dropdown pull-right dropdown-kebab-pf">
                            <button class="btn btn-link dropdown-toggle" type="button" id="kebabEmbedded1"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                              <span class="fa fa-ellipsis-v"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
                              <li><a href="#">Accept</a></li>
                            </ul>
                          </div>
                        </div>

                        <div class="kie-list-group-item-content">
                          <div class="list-view-pf-body">
                            <div class="list-view-pf-description">
                              <div class="list-group-item-heading">
                                Review Document
                              </div>
                              <div class="list-group-item-text">
                                Unassigned
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="">
                          <div class="dropdown pull-right dropdown-kebab-pf">
                            <button class="btn btn-link dropdown-toggle" type="button" id="kebabEmbedded2"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                              <span class="fa fa-ellipsis-v"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
                              <li><a href="#">Accept</a></li>
                            </ul>
                          </div>
                        </div>

                        <div class="kie-list-group-item-content">
                          <div class="list-view-pf-body">
                            <div class="list-view-pf-description">
                              <div class="list-group-item-heading">
                                Collect documents
                              </div>
                              <div class="list-group-item-text">
                                Unassigned
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="">
                          <div class="dropdown pull-right dropdown-kebab-pf dropup">
                            <button class="btn btn-link dropdown-toggle" type="button" id="kebabEmbedded3"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                              <span class="fa fa-ellipsis-v"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
                              <li><a href="#">Accept</a></li>
                            </ul>
                          </div>
                        </div>
                        <div class="kie-list-group-item-content">
                          <div class="list-view-pf-body">
                            <div class="list-view-pf-description">
                              <div class="list-group-item-heading">
                                Approve document
                              </div>
                              <div class="list-group-item-text">
                                Unassigned
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- more items that are below the fold of the list -->
                      <div class="list-group-item">
                        <div class="">
                          <div class="dropdown pull-right dropdown-kebab-pf">
                            <button class="btn btn-link dropdown-toggle" type="button" id="kebabEmbedded4"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                              <span class="fa fa-ellipsis-v"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
                              <li><a href="#">Accept</a></li>
                            </ul>
                          </div>
                        </div>

                        <div class="kie-list-group-item-content">
                          <div class="list-view-pf-body">
                            <div class="list-view-pf-description">
                              <div class="list-group-item-heading">
                                Collect documents
                              </div>
                              <div class="list-group-item-text">
                                Unassigned
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="">
                          <div class="dropdown pull-right dropdown-kebab-pf">
                            <button class="btn btn-link dropdown-toggle" type="button" id="kebabEmbedded5"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                              <span class="fa fa-ellipsis-v"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
                              <li><a href="#">Accept</a></li>
                            </ul>
                          </div>
                        </div>
                        <div class="kie-list-group-item-content">
                          <div class="list-view-pf-body">
                            <div class="list-view-pf-description">
                              <div class="list-group-item-heading">
                                Approve document
                              </div>
                              <div class="list-group-item-text">
                                Unassigned
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="">
                          <div class="dropdown pull-right dropdown-kebab-pf dropup">
                            <button class="btn btn-link dropdown-toggle" type="button" id="kebabEmbedded6"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                              <span class="fa fa-ellipsis-v"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
                              <li><a href="#">Accept</a></li>
                            </ul>
                          </div>
                        </div>

                        <div class="kie-list-group-item-content">
                          <div class="list-view-pf-body">
                            <div class="list-view-pf-description">
                              <div class="list-group-item-heading">
                                Collect documents
                              </div>
                              <div class="list-group-item-text">
                                Unassigned
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>
                  </div><!-- scrollbox -->
                  <div class="kie-list__pagination">
                    <a href="" class="disabled"><span class="fa fa-chevron-circle-up"></span></a>
                    <a href="" class=""><span class="fa fa-chevron-circle-down"></span></a>
                  </div>
                </div>
              </div>

              <!-- In-progress task actions -->
              <div class="col-xs-12 col-sm-6 col-lg-4">
                <div class="kie-card-heading--embedded">
                  <h3 class="card-pf-subtitle kie-card__subtitle">
                    <span
                        class="fa fa-flag-checkered kie-card__subtitle-icon kie-card__subtitle-icon--inprogress"></span>
                    In-Progress
                    <span class="badge">1</span>
                    <!--<div class="dropdown dropdown-kebab-pf pull-right">-->
                    <!--<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab"-->
                    <!--data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">-->
                    <!--<span class="fa fa-ellipsis-v"></span>-->
                    <!--</button>-->
                    <!--<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebab">-->
                    <!--<li><a href="#">Action</a></li>-->
                    <!--<li><a href="#">Another action</a></li>-->
                    <!--<li><a href="#">Something else here</a></li>-->
                    <!--<li role="separator" class="divider"></li>-->
                    <!--<li><a href="#">Separated link</a></li>-->
                    <!--</ul>-->
                    <!--</div>-->

                  </h3>

                </div>
                <div class="card-pf-body kie-card-body--embedded">
                  <div href="" class="card-pf-link-with-icon"><span class="pficon pficon-info"></span>No data available
                  </div>

                </div>
              </div>

              <!-- Completed task actions -->
              <div class="col-xs-12 col-sm-6 col-lg-4">
                <div class="kie-card-heading--embedded">
                  <h3 class="card-pf-subtitle kie-card__subtitle">
                    <span class="fa fa-flag kie-card__subtitle-icon kie-card__subtitle-icon--complete"></span>
                    Completed
                    <!--<span class="badge">1</span>-->
                  </h3>
                </div>
                <div class="card-pf-body kie-card-body--embedded">
                  <p>
                  <div class="spinner spinner-sm spinner-inline"></div>
                  Loading data...</p>

                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</div>

</body>
</html>