typographie · metadonnees
Ligne d'informations contextuelles pour un article ou une réflexion : date, catégorie, durée de lecture, auteur.
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
.bn-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
padding: 1.5rem 2rem;
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #979793;
background: #0B0F10;
}
.bn-meta__item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.bn-meta__icon {
font-size: 0.85rem;
}
.bn-meta__dot {
color: #3B4345;
}
</style>
<div class="bn-meta">
<span class="bn-meta__item">
<span class="bn-meta__icon">📅</span> 12 mai 2026
</span>
<span class="bn-meta__dot">•</span>
<span class="bn-meta__item">
<span class="bn-meta__icon">📁</span> Réflexions
</span>
<span class="bn-meta__dot">•</span>
<span class="bn-meta__item">
<span class="bn-meta__icon">🕐</span> 6 min de lecture
</span>
<span class="bn-meta__dot">•</span>
<span class="bn-meta__item">
<span class="bn-meta__icon">👤</span> Blaig Nova
</span>
</div>