UI Generator

Select theme appearance

Alerts

Inform your users about changes, important updates or provide feedback to their recent actions. This stands out, so use it accordingly.

Link to section titled: Component

Component

Alert title

This is only a warning. The next one will be FATAL!

Alerts

- html 
<!-- COMPONENT-START: nc-alert -->
<div class="nc-box -bordered nc-cluster nc-alert -warning">
    <svg
        class="nc-icon"
        data-size="lg"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
    >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
    </svg>

    <div>
        <p class="nc-alert-title">Alert title</p>
        <p>This is only a warning. The next one will be FATAL!</p>
    </div>
</div>
<!-- COMPONENT-END: nc-alert -->
Link to section titled: Modifiers

Modifiers

-primary
Applies a theme using your primary brand color
-secondary
Applies a theme using your secondary brand color
-neutral
Applies a neutral theme
-muted
Applies a muted neutral theme with less contrast
-emphasis
Applies an emphasised theme, usually very visible
-info
Applies a theme using info colors. Use it to indicate info state
-warning
Applies a theme using warning colors. Used to indicate warning state
-success
Applies a theme using success colors. Used to indicate success state
-danger
Applies a theme using danger colors. Used to indicate danger state
-filled
A more prominent version of the alert
Link to section titled: Examples

Examples

All base alerts

An overview over all alerts variants and their modifiers

Base alerts without title

This is only a warning. The next one will be FATAL!

Base alerts without title or icon

This is only a warning. The next one will be FATAL!

Base alerts in all variants

[Warning] Alert title

This is only a warning. The next one will be FATAL!

[Info] Alert title

This is only a warning. The next one will be FATAL!

[Success] Alert title

This is only a warning. The next one will be FATAL!

[Danger] Alert title

This is only a warning. The next one will be FATAL!

Can also be non-status variants

[Neutral] Alert title

This is only a warning. The next one will be FATAL!

[Muted] Alert title

This is only a warning. The next one will be FATAL!

[Emphasis] Alert title

This is only a warning. The next one will be FATAL!

[Primary] Alert title

This is only a warning. The next one will be FATAL!

[Secondary] Alert title

This is only a warning. The next one will be FATAL!

Filled alerts in all variants

[Warning] Alert title

This is only a warning. The next one will be FATAL!

[Info] Alert title

This is only a warning. The next one will be FATAL!

[Success] Alert title

This is only a warning. The next one will be FATAL!

[Danger] Alert title

This is only a warning. The next one will be FATAL!

Can also be non-status variants

[Neutral] Alert title

This is only a warning. The next one will be FATAL!

[Muted] Alert title

This is only a warning. The next one will be FATAL!

[Emphasis] Alert title

This is only a warning. The next one will be FATAL!

[Primary] Alert title

This is only a warning. The next one will be FATAL!

[Secondary] Alert title

This is only a warning. The next one will be FATAL!

All base alerts

- html 
<div class="nc-stack">
    <p><strong>Base alerts without title</strong></p>
    <div class="nc-box -bordered nc-cluster nc-alert -warning">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <p>This is only a warning. The next one will be FATAL!</p>
    </div>

    <p><strong>Base alerts without title or icon</strong></p>
    <div class="nc-box -bordered nc-cluster nc-alert -warning">
        <p>This is only a warning. The next one will be FATAL!</p>
    </div>

    <p><strong>Base alerts in all variants</strong></p>
    <div class="nc-box -bordered nc-cluster nc-alert -warning">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Warning] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>
    <div class="nc-box -bordered nc-cluster nc-alert -info">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Info] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>
    <div class="nc-box -bordered nc-cluster nc-alert -success">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Success] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>
    <div class="nc-box -bordered nc-cluster nc-alert -danger">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Danger] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>

    <p><strong>Can also be non-status variants</strong></p>
    <div class="nc-box -bordered nc-cluster nc-alert -neutral">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Neutral] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>
    <div class="nc-box -bordered nc-cluster nc-alert -muted">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Muted] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>
    <div class="nc-box -bordered nc-cluster nc-alert -emphasis">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Emphasis] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>
    <div class="nc-box -bordered nc-cluster nc-alert -primary">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Primary] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>
    <div class="nc-box -bordered nc-cluster nc-alert -secondary">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Secondary] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>

    <p><strong>Filled alerts in all variants</strong></p>
    <div class="nc-box -bordered nc-cluster nc-alert -warning -filled">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Warning] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>
    <div class="nc-box -bordered nc-cluster nc-alert -info -filled">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Info] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>
    <div class="nc-box -bordered nc-cluster nc-alert -success -filled">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Success] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>
    <div class="nc-box -bordered nc-cluster nc-alert -danger -filled">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Danger] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>

    <p><strong>Can also be non-status variants</strong></p>
    <div class="nc-box -bordered nc-cluster nc-alert -neutral -filled">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Neutral] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>
    <div class="nc-box -bordered nc-cluster nc-alert -muted -filled">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Muted] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>
    <div class="nc-box -bordered nc-cluster nc-alert -emphasis -filled">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Emphasis] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>
    <div class="nc-box -bordered nc-cluster nc-alert -primary -filled">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Primary] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>
    <div class="nc-box -bordered nc-cluster nc-alert -secondary -filled">
        <svg
            class="nc-icon"
            data-size="lg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" />
        </svg>

        <div>
            <p class="nc-alert-title">[Secondary] Alert title</p>
            <p>This is only a warning. The next one will be FATAL!</p>
        </div>
    </div>
</div>