diff --git a/app/components/dsfr/callout_component.rb b/app/components/dsfr/callout_component.rb
index 43f015174..0f5eb9af8 100644
--- a/app/components/dsfr/callout_component.rb
+++ b/app/components/dsfr/callout_component.rb
@@ -2,11 +2,28 @@
 class Dsfr::CalloutComponent < ApplicationComponent
   renders_one :body
 
-  private
+  attr_reader :title, :theme, :icon
 
-  def initialize(title:)
+  def initialize(title:, theme: :info, icon: nil)
     @title = title
+    @theme = theme
+    @icon = icon
   end
 
-  attr_reader :title
+  def callout_class
+    ["fr-callout", theme_class, icon]
+  end
+
+  private
+
+  def theme_class
+    case theme
+    when :warning
+      "fr-callout--brown-caramel"
+    when :success
+      "fr-callout--green-emeraude"
+    else
+      # info is default theme
+    end
+  end
 end
diff --git a/app/components/dsfr/callout_component/callout_component.html.haml b/app/components/dsfr/callout_component/callout_component.html.haml
index 83c986ce3..5b48a61de 100644
--- a/app/components/dsfr/callout_component/callout_component.html.haml
+++ b/app/components/dsfr/callout_component/callout_component.html.haml
@@ -1,3 +1,3 @@
-%div.fr-callout
+%div{ class: callout_class }
   %h3.fr-callout__title= title
   %p.fr-callout__text= body
diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml
index 907ba3118..823857395 100644
--- a/app/views/root/patron.html.haml
+++ b/app/views/root/patron.html.haml
@@ -304,6 +304,24 @@
     %p.empty-text-details Vous n’avez commencé aucune démarche pour l’instant.
 
   .container
+    %h1 Dsfr::CalloutComponent
+    = link_to "Documentation DSFR Mis en avant (callout)", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-avant", **external_link_attributes
+
+    = render Dsfr::CalloutComponent.new(title: "Information minimale") do |c|
+      - c.with_body do
+        %p Ceci est le minimum pour afficher un callout.
+
+    = render Dsfr::CalloutComponent.new(title: "Information importante ou avertissement", theme: :warning) do |c|
+      - c.with_body do
+        %p Le contenu de cette description est libre.
+
+    = render Dsfr::CalloutComponent.new(title: "Titre d'une information positive", theme: :success, icon: "fr-icon-message-2-fill") do |c|
+      - c.with_body do
+        %p
+          N'importe quelle icône
+          = link_to("du jeu d'icônes", "https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-techniques/icones", **external_link_attributes)
+          peut être utilisée.
+
     %h1 Dsfr::CardVerticalComponent
     = link_to "Documentation DSFR Carte", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte", **external_link_attributes