Contents x
    Scorecard Container
    • 03 May 2024
    • 1 Minute to read
    • Print
    • PDF
    Contents

    Scorecard Container

    • Updated on 03 May 2024
    • 1 Minute to read
    • Print
    • PDF
    Article Summary

    Scorecard Container

    <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://use.typekit.net/vza2xtn.css">
  <link rel="stylesheet" type="text/css" href="/file/bootstrap-multiselect.min.css/">
  <link href="/file/style.css/" rel="stylesheet">
  <link href="/file/rj-style.css/" rel="stylesheet">
</head>

<div class="main-content">
  <div class="container">
      <div class="card">
          <div class="card-header">
              <h3 class="dashboard-headline">Replace_With_Your_Scorecard_Name</h3>
          </div>
          <div class="card-body">
              <div class="company-name">
                  <p>
                      <!-- Company detail snippet -->
                  </p>
              </div>

              <div class="row align-items-center">
                  <!-- Overall Score snippet -->
                  <div class="col-md-8">
                      <div class="row align-items-center rank-row">
                          <div class="col-lg-3 col-md-4 col-sm-4 col-8">
                              <!-- Overall Rank snippet -->
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-3 col-4 align-self-center">
                              <div class="rb-arrow">
                                  <div class="rb-arrow-top"></div>
                                  <div class="rb-arrow-bottom"></div>
                              </div>
                          </div>
                          <div class="col-lg-4 col-md-5 col-sm-5 col-12">
                              <!-- Sector Rank snippet -->
                          </div>
                      </div>
                  </div>
              </div>

              <!-- Scorebreakdown snippet -->
              <hr>

          </div>

          <div class="column-chart-comparison py-5">
              <div class="row mb-4">
                  <div class="col-md-7">
                      <div class="filter-select-boxes d-md-flex">
                          <div class="filter-select-btn">
                              <!--  Filter by Pillars snippet in Pillar Radar Chart -->
                          </div>
                      </div>
                  </div>

              </div>
              <div class="row">
                  <div class="col-md-12">
                      <!-- Radar Chart snippet in Pillar Radar Chart -->
                  </div>
              </div>
          </div>
			  
          <div class="radar-chart-comparison pt-4">
              <div class="row mb-4">
                  <div class="col-md-7">
                      <div class="filter-select-boxes d-md-flex">
                          <div class="filter-select-btn">
                              <!-- Filter by Pillar in Pillar Bar chart -->
                          </div>

                      </div>
                  </div>

              </div>
              <div class="row">
                  <div class="col-md-12">
                      <!-- Bar Chart in Pillar Bar chart -->
                  </div>
              </div>

          </div>
          <div class="card-footer" style="margin-top: 150px;">
              <div class="col-md-6"> </div>
          </div>
      </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.6.1/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
  crossorigin="anonymous"></script>
<script type="text/javascript" src="/file/bootstrap-multiselect.min.js/"></script>
<script type="text/javascript">
  $(document).ready(function () {
      $('.collapse').on('hide.bs.collapse', function () {
          $(this).parent().find('.fa-angle-down').removeClass('.fa fa-angle-down').addClass('.fa fa-angle-up');
      });
      $('.collapse').on('show.bs.collapse', function () {
          $(this).parent().find('.fa-angle-up').removeClass('.fa fa-angle-up').addClass('.fa fa-angle-down');
      });
  });
</script>
    Was this article helpful?
    What's Next