<!-- {#snippet children()} is implicit — content between the tags is rendered as children -->
<Callout variant="info" rounded>
    <p>Les légions romaines parcouraient 30 km par jour sur leurs routes pavées.</p>
</Callout>

<!-- Leading icon -->
{#snippet icon()}
    <span class="material-symbols-outlined">check_circle</span>
{/snippet}

<Callout variant="success" leading={icon}>
    <strong>Succès</strong>
    <p>La lex a été promulguée avec succès.</p>
</Callout>

<!-- Leading + trailing — Button variant="ghost" palette="tone" hérite de --cb-color -->
{#snippet warn_icon()}
    <span class="material-symbols-outlined">warning</span>
{/snippet}

{#snippet dismiss()}
    <Button variant="ghost" palette="tone" size="sm">Ignorer</Button>
{/snippet}

<Callout variant="warning" leading={warn_icon} trailing={dismiss}>
    <p>Les ides de mars approchent. Vérifiez vos accès avant de continuer.</p>
</Callout>