csslayout/contents/statistic.md

layout, title, description, keywords

layout	title	description	keywords
layouts/post.njk	Statistic	Create a statistic component with CSS flexbox	css flexbox, css statistic

HTML

<div class="statistic">
    <!-- Value -->
    <div class="statistic__value">
        ...
    </div>

    <!-- Label -->
    <div class="statistic__label">
        ...
    </div>
</div>

CSS

.statistic {
    /* Center the content */
    align-items: center;
    display: inline-flex;
    flex-direction: column;
}

.statistic__value {
    /* Big font size */
    font-size: 4rem;
    font-weight: 500;
}

.statistic__label {
    /* Smaller font size */
    font-size: 1rem;
    font-weight: 700;

    /* Uppercase the label */
    text-transform: uppercase;
}

{% demo %} {% include "covers/statistic.njk" %} {% enddemo %}