typographie · metadonnees

Métadonnées

Ligne d'informations contextuelles pour un article ou une réflexion : date, catégorie, durée de lecture, auteur.

Voir le code source
<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>