Header

L’en-tête institutionnel identifie le service public : logo/marque, titre, tagline, et une zone d’actions libre (connexion, navigation, recherche). Purement CSS, sans dépendance JavaScript.

Do / Don’t

✓ Faire

Un seul en-tête par page, en tout premier élément du <body>
Utiliser tds-header—compact sur les pages de formulaire pour gagner de l’espace vertical

✗ Éviter

Empiler plusieurs bandeaux/en-têtes qui allongent inutilement le scroll avant le contenu
Mettre des liens de navigation critiques uniquement dans le header sans les dupliquer dans le footer

Variante	Classe	Usage
Par défaut	`tds-header`	En-tête pleine hauteur (4rem min)
Compacte	`tds-header tds-header--compact`	Pages secondaires, formulaires longs

Importation

@import "@tds-tchad/core/components/header/header.css";

import { header } from '@tds-tchad/core/components/header';
import type { HeaderVariant } from '@tds-tchad/core/components/header';

Exemple

<header class="tds-header">
  <a href="/" class="tds-header__brand">
    <img src="/brand/tds-logo-official.png" alt="Tchad Design System" class="tds-header__logo" />
    <div class="tds-header__titles">
      <span class="tds-header__title">République du Tchad</span>
      <span class="tds-header__tagline">Ministère du Numérique</span>
    </div>
  </a>
  <div class="tds-header__actions">
    <a href="/connexion" class="tds-link">Se connecter</a>
  </div>
</header>

Bandeau tricolore

Un bandeau optionnel aux couleurs institutionnelles peut être ajouté au-dessus de l’en-tête :

<div class="tds-header__stripe">
  <span></span><span></span><span></span>
</div>
<header class="tds-header">…</header>