Gallery / Demo Components / Alert / Dismissible Notification Shell Gallery / / Dismissible Notification Shell
Demo Components / Alert /
Documentation
Variant

Dismissible Notification Shell

Demonstrates wrapping a block component with container headers and close controls in Smart Hybrid mode.

Preview

{% alert "warning" %}
Your payment method expires in 5 days. Please update billing details.
{% endalert %}

Parameters

Name Type Required Default Choices Description
level str Yes info info , success , warning , error Alert level modifier
Sandbox
{% alert "info" %}
Information: Scheduled system maintenance on Sunday.
{% endalert %}

<div style="max-width: 500px; margin: 1.5rem auto; border: 1px solid #475569; border-radius: 8px; overflow: hidden; background: #0f172a; font-family: sans-serif;">
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #1e293b; color: #94a3b8; font-size: 13px;">
        <span>System Banner</span>
        <button type="button" style="background: transparent; border: none; color: #94a3b8; cursor: pointer; font-size: 14px;">✕</button>
    </div>
    <div style="padding: 12px;">
        <div class='alert alert-warning warning' role='alert'>Your payment method expires in 5 days. Please update billing details.</div>
    </div>
</div>