Classes CSS d'affichage
Pour voir ce qui est masqué sur l'écran, regardez avec l'inspecteur CSS les blocs de textes cachés grâce à ces utilitaires.
fr-sr-only
Cette classe cache visuellement l'élément mais il reste présent pour les lecteurs d'écran.
Lorem [...] elit ut.
<div class="fr-sr-only">
<p>Lorem [...] elit ut.</p>
</div>
fr-sr-only-[breakpoint]
Cette classe cache visuellement l'élément mais il reste présent pour les lecteurs d'écran, uniquement à partir du breakpoint souhaité. Exemple en LG
fr-hidden
Cette classe cache complètement l'élément, à la fois visuellement et aussi pour les lecteurs d'écran (équivalent au display-none).
Lorem [...] elit ut.
<div class="fr-hidden">
<p>Lorem [...] elit ut.</p>
</div>
fr-hidden-[breakpoint]
Cette classe cache complètement l'élément, à la fois visuellement et aussi pour les lecteurs d'écran (équivalent au display-none) à partir du breakpoint souhaité. Exemple en LG :
Lorem [...] elit ut.
<div class="fr-hidden-lg">
<p>Lorem [...] elit ut.</p>
</div>
fr-unhidden-[breakpoint]
Cette classe, associée à la classe fr-hidden permet de ré-afficher l'élément caché à partir du breakpoint souhaité. Exemple en LG :
Lorem [...] elit ut.
<div class="fr-hidden fr-unhidden-lg">
<p>Lorem [...] elit ut.</p>
</div>