Infographic 1

by Galo Aragoneses

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col col-sm-6 kpi-item">
      <img src="https://img.freepik.com/free-icon/city_318-112631.jpg?size=338c&ext=jpg" />
      <div class="title">Situación de la empresa</div>
      <div class="data1">Activa</div>
    </div>
    <div class="col col-sm-6 kpi-item">
      <img src="https://img.freepik.com/free-icon/city_318-112631.jpg?size=338c&ext=jpg" />
      <div class="title">Situación de la empresa</div>
      <div class="data1">12 / 20</div>
      <div class="data2">(Riesgo Medio-Bajo)</div>
    </div>
  </div>
</div>

CSS

.kpi-item {  
  text-align: center;  
  border: 1px solid #d1d1d1;
  padding: 3%;
}

.kpi-item img {
  width: 40%;
  padding: 8% 5%;
}

.kpi-item > .title {
  font-weight: bold;
  font-size: 90%;
  padding: 2%;
}

.kpi-item > .data1 {
  font-weight: bold;
  font-size: 140%;
}

.kpi-item > .data2 {
  font-weight: bold;
  font-size: 140%;
}