Alert

Added in version 12.0.0.

Renders an alert box (also known as callout) in the HTML.

Props

All props are optional.

• type string.

  • Possible values: info (default), success, warning, danger.

• title string.

• message string. The alert message.

• icon string. A CSS icon class, for example ti ti-info-circle.

  • If not set, the icon is automatically determined from the alert type.

• important bool. When true, the alert is visually highlighted.

  • Default: false.

• link_text string. Alert link, either internal or external.

• link_url string. Text for the link. If not defined will display the link_text

• link_blank bool. If true link target will be _blank, _self otherwise

  • Default: true.

Blocks

title

Completely overrides the title, including the wrapping <h4> element.

content

Completely overrides the message area.

<twig:Alert:Danger>
    <twig:block name="title">
        <h2 class="alert-title">
            Custom title block
        </h2>
    </twig:block>

    <div>
        My alert content
    </div>
</twig:Alert:Danger>

Variants

Pre-typed variant components are available as shortcuts:

<twig:Alert:Success>Success alert</twig:Alert:Success>
<twig:Alert:Info>Info alert</twig:Alert:Info>
<twig:Alert:Warning>Warning alert</twig:Alert:Warning>
<twig:Alert:Danger>Danger alert</twig:Alert:Danger>

<twig:Alert>Main alert</twig:Alert>
<twig:Alert type="danger">Main alert with type danger</twig:Alert>