Cards Dashboards

by Rapha Souza

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

  <div class="row">


    <!-- 1 -->
    <div class="col-md-4 col-xl-3">
      <div class="card bg-c-1 order-card">
        <div class="card-block">

          <h2 class="text-right"><span class="cl_COUNT_AGUARDANDO_CONF_PARCEIRO_PUBLICO">0</span></h2>
          <p class="m-b-0 ">Aguardando Confirmação do Parceiro Público</p>
        </div>
      </div>
    </div>

    <!------------------------------------->

    <!-- 2 -->
    <div class="col-md-4 col-xl-3">
      <div class="card bg-c-2 order-card">
        <div class="card-block">

          <h2 class="text-right"><span class="cl_COUNT_AGUARDANDO_CORRECAO_SOLICITANTE">0</span></h2>
          <p class="m-b-0 ">Aguardando Correção do Solicitante</p>
        </div>
      </div>
    </div>

    <!------------------------------------->

    <!-- 3 -->
    <div class="col-md-4 col-xl-3">
      <div class="card bg-c-3 order-card">
        <div class="card-block">

          <h2 class="text-right"><span class="cl_COUNT_EM_ANALISE_GESTOR">0</span></h2>
          <p class="m-b-0 ">Em Análise Pelo Gestor</p>
        </div>
      </div>
    </div>

    <!------------------------------------->

    <!-- 4 -->
    <div class="col-md-4 col-xl-3">
      <div class="card bg-c-4 order-card">
        <div class="card-block">

          <h2 class="text-right"><span class="cl_COUNT_EM_AVALIACAO_GESTOR">0</span></h2>
          <p class="m-b-0 ">Em Avaliação do Gestor</p>
        </div>
      </div>
    </div>

    <!------------------------------------->

    <!-- 5 -->
    <div...

CSS

.order-card {
    color: #fff;
}
/*** CARDS **/

.bg-c-1 {
    background-image: linear-gradient(to right,#f37022,#f37022)
}

.bg-c-2 {
    background-image: linear-gradient(to right,#f37022,#faa619)
}

.bg-c-3 {
  
    background-image: linear-gradient(to right,#009bdd,#009bdd)
}

.bg-c-4 {
  
        background-image: linear-gradient(to right,#045b8f,#045b8f)
}

.bg-c-5 {

        background-image: linear-gradient(to right,#14ccb9,#14ccb9)
}

.bg-c-6 {
  
        background-image: linear-gradient(to right,#ed145b,#ed145b)
}

.bg-c-7 {
    background-image: linear-gradient(to right,#72bf44,#a6ce39);

}

.bg-c-8 {

        background-image: linear-gradient(to right,#a6cf38,#a6cf38)
}

.bg-c-9 {

        background-image: linear-gradient(to right,#e3b420,#e3b420)
}

.bg-c-10 {

        background-image: linear-gradient(to right,#58595b,#58595b)
}



.card {
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    border: none;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.card .card-block {
    padding: 25px;
}

.order-card i {
    font-size: 26px;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}