Estou trabalhando com um card que vai funcionar para retornar dados como (dia de hoje, mês atual, dia de ontem e enfim), mas gostaria de deixar o dia igual a imagem, não consegui usando tabelas, segue o código:
.mes-setado {
letter-spacing: 15px;
font-size: 35px;
width: 100%;
padding-left: 150px;
float: right;
margin-right: -5px;
margin-bottom: 10px;
}
.ano-setado {
letter-spacing: 3px;
font-size: 35px;
width: 100%;
padding-left: 150px;
float: right;
margin-right: -5px;
}
.dia-setado {
font-size: 80px;
padding-top: 10px;
width: 100%;
}
.simple {
text-align: right;
margin-right: 2.5px;
margin-top: 5px;
}
.values {
font-size: 25px;
align-content: right;
text-align: right;
width: 100%;
padding-bottom: 10.5px;
}
.tabela {
width: 100%;
margin-top: 10px;
display: inline;
}
.info {
width: 100%;
border-top: 1px solid #000000;
margin-top: 10.5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12 col-sm-12 col-lg-12 row justify-content-center">
<nb-card accent="info">
<nb-card-body>
<div class="row justify-content-center">
<div class="container">
<table class="tabela">
<td class="dia-setado">23</td> <br>
<td class="mes-setado">SET</td> <br>
<td class="ano-setado">2019</td>
</table>
</div>
</div>
<div class="info"></div>
<div>
<div class="simple">Digitados</div>
<div class="values">310.800</div>
<div class="simple">Pagos</div>
<div class="values">128.100</div>
</div>
<nb-progress-bar status="info" [value]="30"></nb-progress-bar>
</nb-card-body>
</nb-card>
</div>
<nb-card>
,<nb-card-body>
, etc não são nativos do HTML, o que sugere que está utilizando algo a mais que apenas HTML 5 e CSS 3.