Componente
Callout
Riquadri di approfondimento con titolo maiuscolo e icona, sui token del tema; la variante «Approfondimento» usa l'angolo piegato it-fold-corner.
- Riferimento
<it-callout>, <it-callout-more>- Classi
ita-calloutita-callout-primaryita-callout-successita-callout-warningita-callout-dangerita-callout-highlightita-callout-bigita-callout-headerita-callout-iconita-callout-titleita-callout-bodyita-callout-moreita-callout-more-footerita-callout-more-toggleita-link- Basato su (daisyUI)
link- Estensioni
it-fold-cornerit-plus-minus- Solo CSS
- «Leggi tutto» è un <details>: le etichette [data-closed] e [data-open] di ita-callout-more-toggle si scambiano quando si apre.
- Storybook
- Apri le storie di Callout
Callout base
Titolo callout
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.
Mostra il codice HTMLNascondi il codice HTML
<section class="ita-callout" aria-labelledby="callout-title-1">
<div class="ita-callout-header">
<svg class="ita-callout-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21L12,21z M11.3,6h1.5v2h-1.5V6z M11.3,9h1.5v9h-1.5V9z" /></svg>
<h2 id="callout-title-1" class="ita-callout-title">Titolo callout</h2>
</div>
<div class="ita-callout-body"><p>Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.</p></div>
</section>Big text
Titolo callout
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.
Mostra il codice HTMLNascondi il codice HTML
<section class="ita-callout ita-callout-big" aria-labelledby="callout-title-2">
<div class="ita-callout-header">
<svg class="ita-callout-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21L12,21z M11.3,6h1.5v2h-1.5V6z M11.3,9h1.5v9h-1.5V9z" /></svg>
<h2 id="callout-title-2" class="ita-callout-title">Titolo callout</h2>
</div>
<div class="ita-callout-body"><p>Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.</p></div>
</section>Varianti di colore
Note a riguardo
Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.
Titolo di conferma
Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.
Titolo di attenzione
Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.
Titolo di allerta
Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.
Mostra il codice HTMLNascondi il codice HTML
<section class="ita-callout ita-callout-primary" aria-labelledby="callout-title-3">
<div class="ita-callout-header">
<svg class="ita-callout-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21L12,21z M11.3,6h1.5v2h-1.5V6z M11.3,9h1.5v9h-1.5V9z" /></svg>
<h2 id="callout-title-3" class="ita-callout-title">Note a riguardo</h2>
</div>
<div class="ita-callout-body"><p>Maecenas at erat id <strong>sem interdum efficitur eu sed nunc.</strong> Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.</p></div>
</section>
<section class="ita-callout ita-callout-success" aria-labelledby="callout-title-4">
<div class="ita-callout-header">
<svg class="ita-callout-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.1,7.9l0.7,0.7L10,16.2l-4.7-4.6L6,10.9l4,3.9L17.1,7.9z M22,12c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2S22,6.5,22,12z M21,12c0-5-4-9-9-9s-9,4-9,9s4,9,9,9S21,17,21,12z" /></svg>
<h2 id="callout-title-4" class="ita-callout-title">Titolo di conferma</h2>
</div>
<div class="ita-callout-body"><p>Maecenas at erat id <strong>sem interdum efficitur eu sed nunc.</strong> Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.</p></div>
</section>
<section class="ita-callout ita-callout-warning" aria-labelledby="callout-title-5">
<div class="ita-callout-header">
<svg class="ita-callout-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21L12,21z M11.5,14.2V5.7h1.2v8.5H11.5z M11.4,16.5h1.2v1.8h-1.2V16.5z" /></svg>
<h2 id="callout-title-5" class="ita-callout-title">Titolo di attenzione</h2>
</div>
<div class="ita-callout-body"><p>Maecenas at erat id <strong>sem interdum efficitur eu sed nunc.</strong> Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.</p></div>
</section>
<section class="ita-callout ita-callout-danger" aria-labelledby="callout-title-6">
<div class="ita-callout-header">
<svg class="ita-callout-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M16.3,8.3L12.6,12l3.7,3.6l-0.7,0.7l-3.7-3.6l-3.6,3.6l-0.7-0.7l3.6-3.6L7.6,8.3l0.7-0.7l3.6,3.7l3.7-3.7L16.3,8.3z M22,12 c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2S22,6.5,22,12z M21,12c0-5-4-9-9-9s-9,4-9,9s4,9,9,9S21,17,21,12z" /></svg>
<h2 id="callout-title-6" class="ita-callout-title">Titolo di allerta</h2>
</div>
<div class="ita-callout-body"><p>Maecenas at erat id <strong>sem interdum efficitur eu sed nunc.</strong> Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.</p></div>
</section>Highlight
Titolo callout
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.
Note a riguardo
Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.
Titolo di conferma
Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.
Titolo di attenzione
Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.
Titolo di allerta
Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.
Mostra il codice HTMLNascondi il codice HTML
<section class="ita-callout ita-callout-highlight" aria-labelledby="callout-title-7">
<div class="ita-callout-header">
<svg class="ita-callout-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21L12,21z M11.3,6h1.5v2h-1.5V6z M11.3,9h1.5v9h-1.5V9z" /></svg>
<h2 id="callout-title-7" class="ita-callout-title">Titolo callout</h2>
</div>
<div class="ita-callout-body"><p>Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.</p></div>
</section>
<section class="ita-callout ita-callout-primary ita-callout-highlight" aria-labelledby="callout-title-8">
<div class="ita-callout-header">
<svg class="ita-callout-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21L12,21z M11.3,6h1.5v2h-1.5V6z M11.3,9h1.5v9h-1.5V9z" /></svg>
<h2 id="callout-title-8" class="ita-callout-title">Note a riguardo</h2>
</div>
<div class="ita-callout-body"><p>Maecenas at erat id <strong>sem interdum efficitur eu sed nunc.</strong> Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.</p></div>
</section>
<section class="ita-callout ita-callout-success ita-callout-highlight" aria-labelledby="callout-title-9">
<div class="ita-callout-header">
<svg class="ita-callout-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.1,7.9l0.7,0.7L10,16.2l-4.7-4.6L6,10.9l4,3.9L17.1,7.9z M22,12c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2S22,6.5,22,12z M21,12c0-5-4-9-9-9s-9,4-9,9s4,9,9,9S21,17,21,12z" /></svg>
<h2 id="callout-title-9" class="ita-callout-title">Titolo di conferma</h2>
</div>
<div class="ita-callout-body"><p>Maecenas at erat id <strong>sem interdum efficitur eu sed nunc.</strong> Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.</p></div>
</section>
<section class="ita-callout ita-callout-warning ita-callout-highlight" aria-labelledby="callout-title-10">
<div class="ita-callout-header">
<svg class="ita-callout-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21L12,21z M11.5,14.2V5.7h1.2v8.5H11.5z M11.4,16.5h1.2v1.8h-1.2V16.5z" /></svg>
<h2 id="callout-title-10" class="ita-callout-title">Titolo di attenzione</h2>
</div>
<div class="ita-callout-body"><p>Maecenas at erat id <strong>sem interdum efficitur eu sed nunc.</strong> Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.</p></div>
</section>
<section class="ita-callout ita-callout-danger ita-callout-highlight" aria-labelledby="callout-title-11">
<div class="ita-callout-header">
<svg class="ita-callout-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M16.3,8.3L12.6,12l3.7,3.6l-0.7,0.7l-3.7-3.6l-3.6,3.6l-0.7-0.7l3.6-3.6L7.6,8.3l0.7-0.7l3.6,3.7l3.7-3.7L16.3,8.3z M22,12 c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2S22,6.5,22,12z M21,12c0-5-4-9-9-9s-9,4-9,9s4,9,9,9S21,17,21,12z" /></svg>
<h2 id="callout-title-11" class="ita-callout-title">Titolo di allerta</h2>
</div>
<div class="ita-callout-body"><p>Maecenas at erat id <strong>sem interdum efficitur eu sed nunc.</strong> Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.</p></div>
</section>Approfondimento
Approfondimento
Quisque suscipit interdum augue non volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec ut libero eget nisl dignissim fermentum ut ut nisi. Aliquam erat volutpat.
Quisque suscipit interdum augue non volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec ut libero eget nisl dignissim fermentum ut ut nisi. Aliquam erat volutpat.
Mostra il codice HTMLNascondi il codice HTML
<section class="ita-callout-more it-fold-corner" aria-labelledby="callout-more-title">
<h2 id="callout-more-title" class="ita-callout-title mb-4">Approfondimento</h2>
<p>Quisque suscipit interdum augue non volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec ut libero eget nisl dignissim fermentum ut ut nisi. Aliquam erat volutpat.</p>
<p>Quisque suscipit interdum augue non volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec ut libero eget nisl dignissim fermentum ut ut nisi. Aliquam erat volutpat.</p>
<div class="ita-callout-more-footer">
<details class="grow">
<summary class="ita-callout-more-toggle">
<span data-closed>Leggi tutto</span><span data-open>Chiudi</span>
<span class="it-plus-minus" aria-hidden="true"></span>
</summary>
<p class="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius. Maecenas vulputate ante dictum vestibulum volutpat.</p>
</details>
<a href="#" class="ita-link inline-flex shrink-0 items-center gap-2">Download <svg class="size-6 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.2L7.7,9.9l0.7-0.7l3.1,3.1V3h1v9.2l3.1-3l0.7,0.7L12,14.2z M19,12v7.5c0,0.3-0.2,0.5-0.5,0.5h-13 C5.2,20,5,19.8,5,19.5V12H4v7.5C4,20.3,4.7,21,5.5,21h13c0.8,0,1.5-0.7,1.5-1.5V12H19z" /></svg></a>
</div>
</section>