Zone d'expression visuelle
La zone d’expression visuelle est une section de page à l’intérieur de laquelle il est possible de faire des compositions créativement plus riches que généralement autorisé par le DSFR.
Les composants existants dans mkdocs-dsfr permettent de faire de telles compositions, en intégrant le système de grille avec du texte, des images et des boutons de lien.
Exemple de composition
Un super slogan pour votre site
Quelques détails qui feront la différence grâce à cette composition visuelle.
Extrait de code
/// row | fr-background-contrast--blue-ecume fr-grid-row--middle
/// col | 12 xl-8
class: fr-p-6w fr-px-md-8w
### Un super slogan pour votre site
Quelques détails qui feront la différence grâce à cette composition visuelle.
/// buttons
inline: inline-sm
/// button | Action principale
target: "#"
///
/// button | Autre action
kind: secondary
target: "#"
///
///
///
/// col | 12 xl-4
class: fr-hidden fr-unhidden-xl
{: .fr-responsive-img .fr-responsive-img--1x1 }
///
///
Prérequis technique
Une connaissance des fondamentaux du DSFR est nécessaire pour connaitre les classes CSS à utiliser pour les couleurs de fond, fixer des marges et rendre la composition comme vous le souhaitez.
Dernière modification le 5 juin 2026