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é.

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 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 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 starting_header_level au composant.

Code

= dsfr_callout(title: "Exemple de mise en avant avec un titre en H2", starting_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>

Plus d’informations