Alerts

Form Alerts

Canvas ships two families of alert boxes: Bootstrap .alert components and the themed Canvas Style Boxes (.style-msg / .style-msg2). Use Bootstrap alerts for dismissible page banners and Style Boxes for richer notification panels. Markup is from style-boxes.html and block-content-alert-*.html. Styles live in sass/shortcodes/_alerts.scss.

Bootstrap Alerts

Standard Bootstrap 5 alerts. Use the contextual variants (alert-success, alert-primary, alert-danger, etc.) and .alert-link for links inside.

<div class="alert alert-success">
    <i class="bi-boxes"></i><strong>Well done!</strong> You successfully read this important alert message.
</div>

Dismissible alerts add .alert-dismissible plus a .btn-close button with data-bs-dismiss="alert":

<div class="alert alert-primary rounded-0 fixed-bottom m-0" data-animate="fadeInUp faster">
    <div class="container">
        <div class="d-flex align-items-center">
            <span>Cookie notice text goes here.</span>
            <button type="button" class="btn-close btn btn-link float-lg-none text-dark ms-md-3" data-bs-dismiss="alert" aria-hidden="true"></button>
        </div>
    </div>
</div>

Positioned Alert Bars

Combine Bootstrap position utilities with .alert for site-wide notification bars. Add a data-animate value for an entrance animation.

<!-- Sticky top bar -->
<div class="alert alert-primary sticky-top m-0"> ... </div>

<!-- Fixed bottom bar -->
<div class="alert alert-primary rounded-0 fixed-bottom m-0" data-animate="fadeInUp faster"> ... </div>

<!-- Floating bottom-right, custom width -->
<div class="alert alert-success fixed-bottom" style="max-width: 400px; left: auto; right: 20px;" data-animate="fadeInRight faster"> ... </div>

Canvas Style Boxes

The .style-msg box is a themed notification with a colored background and a left accent border. The message text goes in a .sb-msg child, and you can lead with a Bootstrap Icon.

<div class="style-msg successmsg">
    <div class="sb-msg"><i class="bi-hand-thumbs-up"></i><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>

<div class="style-msg errormsg">
    <div class="sb-msg"><i class="bi-x-lg"></i><strong>Oh snap!</strong> Change a few things up and try submitting again.</div>
</div>

<div class="style-msg infomsg">
    <div class="sb-msg"><i class="bi-info-circle-sign"></i><strong>Heads up!</strong> This alert needs your attention, but it's not super important.</div>
</div>

<div class="style-msg alertmsg">
    <div class="sb-msg"><i class="bi-exclamation-diamond-fill"></i><strong>Warning!</strong> Better check yourself, you're not looking too good.</div>
</div>

A blank box takes any custom color via an inline background-color:

<div class="style-msg" style="background-color: #EEE;">
    <div class="sb-msg"><i class="bi-question-circle-sign"></i>This is a <strong>Blank Notification</strong> Box.</div>
</div>

For dark custom backgrounds, add .style-msg-light so the text turns white:

<div class="style-msg style-msg-light" style="background-color: #333;">
    <div class="sb-msg"><i class="bi-question-circle-sign"></i>This is a <strong>Blank Notification</strong> Box.</div>
</div>

Extended Style Boxes

The .style-msg2 variant adds a bold .msgtitle header above the .sb-msg body, ideal for lists of validation errors or success items.

<div class="style-msg2 errormsg">
    <div class="msgtitle">Fix the Following Errors:</div>
    <div class="sb-msg">
        <ul>
            <li>The email address field cannot be left blank before you continue.</li>
            <li>Your chosen password must contain at least eight characters.</li>
            <li>Please accept the terms of service to complete registration here.</li>
        </ul>
    </div>
</div>

<div class="style-msg2 successmsg">
    <div class="msgtitle">Some of your Successful Works:</div>
    <div class="sb-msg">
        <ul>
            <li>Your account profile details were updated and saved correctly.</li>
            <li>A confirmation message has been sent to your inbox just now.</li>
        </ul>
    </div>
</div>

Options

Style Box color classes (driven by the theme color map in _alerts.scss):

• successmsg = green success box.
• errormsg = red error box.
• infomsg = blue informational box.
• alertmsg = amber warning box.
• Any {state}msg from the theme color palette works (for example primarymsg, dangermsg) since the boxes are generated per theme color.

Modifiers:

• .style-msg = single-line notification box.
• .style-msg2 = box with a bold .msgtitle header (supports <ul>/<ol> lists).
• .style-msg-light = white text for use on dark custom backgrounds.
• Inline background-color sets a fully custom box color.

Tips

• Style Box text must live inside .sb-msg; the accent border and padding are applied through that child.
• .style-msg2 supports lists: use <ul> (disc) or <ol> (decimal) inside .sb-msg.
• Lead icons use Bootstrap Icons (bi-*) sized to match the box automatically; you do not need extra icon classes.
• For dismissible Bootstrap alerts, the close button needs data-bs-dismiss="alert" to work.