Alert: code & specs

This page documents the expected code output and structure necessary to display alerts correctly in the UI.

Alert base code

The base alert component relies on a specific HTML structure and a defined set of CSS classes to ensure consistent styling and functionality across all alert variants.

The example below outlines the minimal structure required to render a basic alert. The .alert class is the outermost wrapper. Inside, the .alert-content container wraps the main content area. The .alert-body section holds the core content of the alert, and within it, the .alert-message element contains the primary message.

This structure forms the foundation of all alert variants.

html 
<div class="alert" role="alert">
    <div class="alert-content">

        <div class="alert-body">
            <div class="alert-message">
                <h6>Alert message</h6>
            </div>
        </div>

    </div>
</div>

Supporting items

Alert note

To include a supporting note in an alert, add an .alert-note element inside the .alert-body, positioned directly beneath the .alert-message. This optional element can be used to provide additional context or guidance without overwhelming the main message.

html 
<div class="alert" role="alert">
    <div class="alert-content">
        <div class="alert-body">
            <div class="alert-message">
                <h6>Alert message</h6>
            </div>
            <div class="alert-note">
                Etiam accumsan urna a mauris dapibus, nec aliquet nunc convallis. Phasellus eget justo et libero ultrices posuere.                
            </div>
        </div>
    </div>
</div>

Small note

In addition to the note you can also add a supporting small note inside it but including a <small> element inside the .alert-note. Wrap the <small> element inside a <p> element to render proper spacing between the <small> and the note text.

html 
<div class="alert" role="alert">
    <div class="alert-content">
        <div class="alert-body">
            <div class="alert-message">
                <h6>Alert message</h6>
            </div>
            <div class="alert-note">
                Etiam accumsan urna a mauris dapibus, nec aliquet nunc convallis. Phasellus eget justo et libero ultrices posuere.
                <p><small>Etiam accumsan urna a mauris dapibus, nec aliquet nunc convallis.</small></p>
            </div>
        </div>
    </div>
</div>

Modifiers

Icon

To include an icon in an alert, add an .alert-icon element as the first child inside the .alert-content container. Place the desired icon within this span, using a suitable icon library class such as Font Awesome.

html 
<div class="alert" role="alert">
    <div class="alert-content">
        <span class="alert-icon">
            <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
        </span>
        <div class="alert-body">
            <div class="alert-message">
                <h6>Alert message</h6>
            </div>
        </div>
    </div>
</div>

Context bar

The .context-bar should be added as the final element within the .alert-body container. It provides a dedicated area for supporting elements such as CTA buttons, standalone links, and time stamps. Any of these components can be included within the .context-bar to offer additional context or actions related to the alert message.

html 
<div class="alert" role="alert">
    <div class="alert-content">
        <div class="alert-body">
            <div class="alert-message">
                <h6>Alert message</h6>
            </div>
            <div class="alert-note">
                Curabitur tincidunt, felis a elementum tincidunt, ex felis fermentum dui, eget pulvinar arcu eros eu eros.
            </div>
            <div class="alert-contextbar">
                <button type="button" class="btn btn-secondary btn-sm">
                    <span class="button-label">Button</span>
                </button>
            </div>
        </div>
    </div>
</div>

Close button

The close button is positioned as the last element inside the .alert-content container using the .btn-close class.

html 
<div class="alert" role="alert">
    <div class="alert-content">
        <div class="alert-body">
            <div class="alert-message">
                <h6>Alert message</h6>
            </div>
            <div class="alert-note">
                Curabitur tincidunt, felis a elementum tincidunt, ex felis fermentum dui, eget pulvinar arcu eros eu eros.
            </div>
        </div>
    </div>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Alert status

Alert notifications support four visual states: info, success, warning, and error.

These states help communicate the purpose and urgency of the message through colour and iconography. To apply a state, add the corresponding modifier class to the base .alert element using the format .alert-*, for example, .alert-info for informational messages or .alert-error for critical issues. This ensures consistent styling and clear messaging across the interface.

html 
<div class="alert alert-info" role="alert">
    <div class="alert-content">
        <span class="alert-icon">
            <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
        </span>
        <div class="alert-body">
            <div class="alert-message">
                <h6>Info alert message</h6>
            </div>
        </div>
    </div>
</div>

<div class="alert alert-success" role="alert">
    <div class="alert-content">
        <span class="alert-icon">
            <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
        </span>
        <div class="alert-body">
            <div class="alert-message">
                <h6>Success alert message</h6>
            </div>
        </div>
    </div>
</div>

<div class="alert alert-warning" role="alert">
    <div class="alert-content">
        <span class="alert-icon">
            <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
        </span>
        <div class="alert-body">
            <div class="alert-message">
                <h6>Warning alert message</h6>
            </div>
        </div>
    </div>
</div>

<div class="alert alert-error" role="alert">
    <div class="alert-content">
        <span class="alert-icon">
            <i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i>
        </span>
        <div class="alert-body">
            <div class="alert-message">
                <h6>Error alert message</h6>
            </div>
        </div>
    </div>
</div>

Animations

The close button is positioned as the last element inside the .alert-content container using the .btn-close class.

html 
<div class="alert fade show" role="alert">
    <div class="alert-content">
        <div class="alert-body">
            <div class="alert-message">
                <h6>Alert message</h6>
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</div>