diff --git a/docs/componenti/callout.md b/docs/componenti/callout.md
index ca6307674d..fd26c59e6d 100644
--- a/docs/componenti/callout.md
+++ b/docs/componenti/callout.md
@@ -10,7 +10,13 @@ I Callout posso essere utilizzati per evidenziare alcune parti del testo che ric
## Esempi
-Il Callout basico è costituito da un contenitore `
` con classe `.callout`, un titolo contenuto in un `
` con classe `.callout-title` e un testo contenuto in uno o più tag `
`.
+{% capture callout %}
+Breaking feature dalla versione **2.7.0**
+
+Il contenitore `
` con classe `.callout` deve essere seguito da un ulteriore contenitore `
` con classe `.callout-inner`. Seguire gli esempi e la successiva descrizione per capire la composizione del nuovo componente.
+{% endcapture %}{% include callout.html content=callout type="danger" %}
+
+Il Callout basico è costituito da un contenitore `
` con classe `.callout`, un contenitore `
` con classe `.callout-inner` contenente a sua volta un titolo contenuto in un `
` con classe `.callout-title`. A seguire il testo del contenuto principale del Callout incluso in uno o più tag `
`.
Al titolo può essere aggiunta un'icona a scelta fra quelle disponibili, avendo cura di nasconderla agli screen reader con la proprietà `aria-hidden="true"`.
@@ -23,10 +29,15 @@ Nel caso l'icona comunicasse visivamente contenuti non disponibili nel testo (ad
{% comment %}Example name: Testo{% endcomment %}
{% capture example %}
-
-
Confermato Titolo callout
-
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.
+
+
+
+ Confermato
+ Titolo callout
+
+
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.
+
{% endcapture %}{% include example.html content=example %}
@@ -40,8 +51,14 @@ Aggiungere la classe `.success` per indicare una procedura andata a buon fine.
{% capture example %}
-
Usa
-
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.
+
+
+
+ Usa
+ Usa
+
+
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.
+
{% endcapture %}{% include example.html content=example %}
@@ -53,8 +70,14 @@ Aggiungere la classe `.warning` per indicare una procedura o testo che richiede
{% capture example %}
-
Attenzione
-
Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.
+
+
+
+ Attenzione
+ Attenzione
+
+
Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.
+
{% endcapture %}{% include example.html content=example %}
@@ -66,8 +89,14 @@ Aggiungere la classe `.danger` per indicare un errore o una procedura pericolosa
{% capture example %}
-
Non usare
-
Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.
+
+
+
+ Non usare
+ Non usare
+
+
Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.
+
{% endcapture %}{% include example.html content=example %}
@@ -79,8 +108,14 @@ Aggiungere la classe `.important` per attirare ulteriormente l'attenzione.
{% capture example %}
-
Importante
-
Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.
+
+
+
+ Importante
+ Importante
+
+
Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.
+
{% endcapture %}{% include example.html content=example %}
@@ -92,8 +127,14 @@ Aggiungere la classe `.note` per caratterizzare il Callout come una nota.
{% capture example %}
-
Note a riguardo
-
Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.
+
+
+
+ Note
+ Note a riguardo
+
+
Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.