Gradient Cards for Data Display

Beautiful Gradient Cards for showcasing different kinds of data

by stantz16

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap" rel="stylesheet"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  
  <body>
  
  <div class="container bg-gray pt-4 pb-5">
      <h3 class="font-weight-bold mb-0">
          Gradient Cards With Data
      </h3>
      <p class='text-uppercase text-muted'>Beautiful Gradient Cards for showcasing different kinds of data
      </p>
      
      <div class="row">
      
        <div class="col-xl-3 col-md-3 col-sm-6">
        
          <div class="card mb-3 post-card text-left">

            <a class="decoration-none" href="#">

              <div class="card-body text-white-secondary bg-gr-purple">
                  <h4 class="card-title font-main mb-0">#Title 1</h4>
                  <p class="font-important-stat text-white mb-0">12
                    <span class="font-secondary"> 
                      <i class="fas fa-gem " aria-hidden="true"></i>
                    </span> 
                  </p>
                  <p class="text-white-secondary mb-0">Posts</p>
              </div>

            </a>

          </div>
          
      </div>
      
        <div class="col-xl-3 col-md-3 col-sm-6">
        
          <div class="card mb-3 post-card text-left">

            <a class="decoration-none" href="#">

              <div class="card-body text-white-secondary bg-gr-blue">
                  <h4 class="card-title font-main mb-0">#Title 2</h4>
                  <p...

CSS

body{
  font-family: 'PT Sans', sans-serif;
}

.text-white-secondary{
    color: hsla(0, 0%, 100%, 0.7)
}

.font-main{
    font-size: 18px;
}
.font-important-stat{
    font-size: 40px;
    font-weight: 700;
}
.font-secondary{
    font-size:16px;
}

.bg-gray{
  background-color: #f5f5fB;
}

.decoration-none{
  text-decoration: none !important;
}

.bg-gr-purple{
    background: #8E2DE2;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #4A00E0, #8E2DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.bg-gr-blue{
    background: #0052D4;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #6FB1FC, #4364F7, #0052D4);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #6FB1FC, #4364F7, #0052D4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.bg-gr-green{
background: #00b09b;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #96c93d, #00b09b);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #96c93d, #00b09b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.bg-gr-red{
background: #ED213A;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #93291E, #ED213A);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #93291E, #ED213A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.post-card{
    box-shadow: none;
}
.post-card:hover{
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}