Bloc marque
HTML
Le Bloc marque de l'état est constitué d'un bloc Marianne,
d'un intitulé officiel, et de la devise républicaine. Le bloc
Marianne et la devise républicaine sont ajouté automatiquement par
le composant. Le composant est composé d'un élément
<p> avec la classe
.fr-logo. Seul
l'intitulé officiel doit être ajouté dans cet élément.
Exemple de structure HTML
<p class="fr-logo">
Intitulé
<br>officiel
</p>CSS
Installation du CSS
Pour fonctionner correctement le style CSS du composant et de ses
dépendances doivent être importés. L'import doit se faire avant le
contenu de la page dans la partie
<head>, et de
préférence avec les fichiers minifiés, car plus légers.
Il est possible d'importer les fichiers CSS avec un niveau de granularité adapté à vos besoins. Voir le découpage des fichiers CSS du DSFR dans la documentation dédiée .
| Dépendance | Obligatoire |
|---|---|
| Core | Oui |
| Logo | Oui |
Exemple d'imports CSS
<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/logo/logo.min.css" rel="stylesheet">Variantes de taille
Le composant Bloc marque (logo) est disponible en 3 tailles différentes via les classes suivantes :
-
Par défaut : Taille
medium -
fr-logo--sm: Taillesmall -
fr-logo--lg: Taillelarge
<p class="fr-logo fr-logo--sm">
Intitulé
<br>officiel
</p>
<p class="fr-logo fr-logo--lg">
Intitulé
<br>officiel
</p>JavaScript
Le composant Bloc marque ne nécessite pas l'utilisation de JavaScript pour son fonctionnement de base.
Un Javascript disponible dans le core permet de gérer le passage en berne des blocs marque lors des périodes de deuil national. Le fond bleu et rouge du bloc Marianne est alors remplacé par un fond noir.
Installation du JavaScript
Pour faire fonctionner la fonction de passage des blocs marque en berne, le script JavaScript du core doit être importé. L'import doit se faire en fin de page, avant la fermeture du body, et de préférence avec le fichier minifié, car plus léger.
<script type="module" src="dist/core/core.module.min.js"></script>
NB : Il est aussi possible d'importer le JavaScript global du
DSFR
dsfr.module.min.js.
Pour fonctionner sur Internet Explorer 11, un fichier legacy peut aussi être importé :
<script type="text/javascript" nomodule src="dist/legacy/legacy.nomodule.min.js" ></script>
<script type="text/javascript" nomodule src="dist/core/core.nomodule.min.js"></script>Utilisation du JavaScript
Le script permet de passer les blocs marque en berne lors des
deuils nationaux. Pour cela, il suffit d'ajouter l'attribut
data-fr-mourning sur
l'élément <html>.
<html lang="fr" data-fr-mourning>Note de version
Voir les évolutions sur github
Contenu associé
En-tête
Présentation du composant En-tête utilisé pour identifier le site consulté et donner accès à des fonctionnalités clés comme la recherche ou la connexion.
Pied de page
Présentation du composant Pied de page destiné à structurer les informations complémentaires et les liens secondaires en bas de page.
