Mise en avant - Callout

La mise en avant ou callout est une proposition de mise en page du contenu éditorial pour mettre en évidence une information complémentaire. Elle permet à l’utilisateur de distinguer rapidement une information qui vient compléter le contenu consulté. Une icône peut être utilisée avec le paramètre “icon_name”, et désactivée au besoin en utilisant “icon_name: :none”.

Rendu de base

Le rendu de base du CalloutComponent

Code

= dsfr_callout(title: "Exemple de mise en avant") do |component|
  Cette information vient compléter le contenu principal

Résultat

Exemple de mise en avant

Cette information vient compléter le contenu principal 

<div class="fr-callout fr-icon-information-line">
  <h3 class="fr-callout__title">
    Exemple de mise en avant
  </h3>
  <p class="fr-callout__text">
    Cette information vient compléter le contenu principal
  </p>
</div>

Rendu sans icône

Le rendu sans icône.

Code

= dsfr_callout(title: "Mise en avant sans icône", icon_name: :none) do |component|
  Tout ne s'illustre pas

Résultat

Mise en avant sans icône

Tout ne s’illustre pas 

<div class="fr-callout">
  <h3 class="fr-callout__title">
    Mise en avant sans icône
  </h3>
  <p class="fr-callout__text">
    Tout ne s'illustre pas
  </p>
</div>

Rendu sans titre

Le rendu sans titre.

Code

= dsfr_callout do |component|
  Cette information vient compléter le contenu principal sans titre

Résultat

Cette information vient compléter le contenu principal sans titre 

<div class="fr-callout fr-icon-information-line">
  <p class="fr-callout__text">
    Cette information vient compléter le contenu principal sans titre
  </p>
</div>

Rendu avec un autre niveau de titre

Si votre hiérarchie de titre requiert un autre niveau de titre que H3 vous pouvez le spécifier en passant header_level au composant.

Code

= dsfr_callout(title: "Exemple de mise en avant avec un titre en H2", header_level: 2) do |component|
  Cette information vient compléter le contenu principal

Résultat

Exemple de mise en avant avec un titre en H2

Cette information vient compléter le contenu principal 

<div class="fr-callout fr-icon-information-line">
  <h2 class="fr-callout__title">
    Exemple de mise en avant avec un titre en H2
  </h2>
  <p class="fr-callout__text">
    Cette information vient compléter le contenu principal
  </p>
</div>

Rendu avec un bouton

Il est possible de rajouter un zone d’action avec le slot action_zone. Attention : seul un bouton ou un lien doivent figurer dans cette zone.

Code

= dsfr_callout(title: "Exemple de mise en avant") do |component|
  Cette information vient compléter le contenu principal.

  - component.with_action_zone { dsfr_button(label: "Valider") }

Résultat

Exemple de mise en avant

Cette information vient compléter le contenu principal. 

<div class="fr-callout fr-icon-information-line">
  <h3 class="fr-callout__title">
    Exemple de mise en avant
  </h3>
  <p class="fr-callout__text">
    Cette information vient compléter le contenu principal.
  </p>
  <button class="fr-btn">
    Valider
  </button>
</div>

Rendu avec accent

Il est possible d’ajouter une couleur d’accent avec le paramètre accent. Les couleurs disponibles sont celles du DSFR (exemple : green-tilleul-verveine, blue-ecume, purple-glycine, etc.).

Code

= dsfr_callout(title: "Mise en avant avec accent", accent: "green-tilleul-verveine") do |component|
  Cette mise en avant utilise l'accent tilleul-verveine

Résultat

Mise en avant avec accent

Cette mise en avant utilise l’accent tilleul-verveine 

<div class="fr-callout fr-icon-information-line fr-callout--green-tilleul-verveine">
  <h3 class="fr-callout__title">
    Mise en avant avec accent
  </h3>
  <p class="fr-callout__text">
    Cette mise en avant utilise l'accent tilleul-verveine
  </p>
</div>

Plus d’informations