Il Web Toolkit definisce 4 tipologie di Callout: Must, Should, Could, Example. L'inserimento può avvenire tramite codice HTML oppure tramite l'apposito pulsante nell'editor TinyMCE.

<div class="Callout Callout--must u-text-r-xs" role="note">
<h2 class="Callout-title u-text-r-l">must</h2>
<p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">
Voluptate ut voluptatem sit earum ipsam sint. Aut unde explicabo eos dolor rerum eum et. 
Maxime aliquam deserunt. Non officiis eos fugit in perferendis.</p>
</div>

<div class="Callout Callout--should u-text-r-xs" role="note">
<h2 class="Callout-title u-text-r-l">should</h2>
<p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">
Voluptate ut voluptatem sit earum ipsam sint. Aut unde explicabo eos dolor rerum eum et. 
Maxime aliquam deserunt. Non officiis eos fugit in perferendis.</p>
</div>

<div class="Callout Callout--could u-text-r-xs" role="note">
<h2 class="Callout-title u-text-r-l">could</h2>
<p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">
Voluptate ut voluptatem sit earum ipsam sint. Aut unde explicabo eos dolor rerum eum et. 
Maxime aliquam deserunt. Non officiis eos fugit in perferendis.</p>
</div>

<div class="Callout Callout--example u-text-r-xs" role="note">
<h2 class="Callout-title u-text-r-l">example</h2>
<p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">
Voluptate ut voluptatem sit earum ipsam sint. Aut unde explicabo eos dolor rerum eum et. 
Maxime aliquam deserunt. Non officiis eos fugit in perferendis.</p>
</div>

Il pulsante Callout può essere attivato direttamente dal plugin Editor - TinyMCE, abilitando il plugin personalizzato ipa e selezionando il pulsante personalizzato ipa-callout.

Requisiti

Plugin System - TinyMCE for ItaliaPA 3.8.0.10 o successivo