Page Alert
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Navigation Properties
Alert Style [ALERT_MODIFIER]
Changes the visual style of the alert.
Alert theme classes
Text / Background Utility classes
Dismissable Alerts
Dismissable Alert [ALERT_DISMISS]
Adding alert-dismissible class to element.
Close Button Theme data-bs-theme="[ALERT_DISMISS_THEME]"
Set a minimum height for the entire header based on the height of the viewport.
light- Dark colored close button for use against light background colors
dark- Light colored close button for use against dark background colors
Dismissable timeout data-dismiss-timeout="[TIMEOUT_DAYS]"
Set time in days for when the page alert will show to the user. Defaults to 1 day. This feature uses cookies.
Alert Container [ALERT_CONTAINER]
.container-xxl- Standard width, fluid container
.container-fluid- Full width section container
Text Alignment [TEXT_ALIGNMENT]
Align content within alert using text alignment classes.
.text-start- Left aligned text inside column.
.text-end- Right aligned text inside column.
.text-center- Center aligned text inside column.
Template
<div id="[ALERT_UNIQUE_ID]" class="alert [ALERT_MODIFIER] [ALERT_DISMISS]" role="alert" data-bs-theme="[ALERT_DISMISS_THEME]" data-dismiss-timeout="[TIMEOUT_DAYS]">
<div class="[ALERT_CONTAINER] [TEXT_ALIGNMENT]">
...
<-- If dismissable alert -->
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
Page Alert Example
<div id="alert_1" class="alert text-bg-primary" role="alert" data-bs-theme="dark">
<div class="container-xxl text-center">
This is an alert message with a <a href="#">link</a> to click on.
</div>
</div>
Dismissable Page Alert Example
If you are not seeing an alert below, clear cookie named "dismissedAlerts" from your browser.
<div id="alert_2" class="alert text-bg-secondary alert-dismissible" role="alert" data-bs-theme="light" data-dismiss-timeout="1">
<div class="container-xxl text-center">
This is an alert message with a <a href="#">link</a> to click on.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
Page Alert with navigation Example
If you are not seeing an alert below, clear cookie named "dismissedAlerts" from your browser.
<nav class="kb-nav navbar kb-navbar-xl bg-light" ariaLabel="main" data-bs-theme="light">
<div id="alert_1_nav" class="alert alert-info" role="alert" data-bs-theme="light">
<div class="container-xxl text-center">
This is an alert message with a <a href="#">link</a> to click on.
</div>
</div>
<div id="alert_2_nav" class="alert alert-warning alert-dismissible" role="alert" data-bs-theme="light" data-dismiss-timeout="1">
<div class="container-xxl text-center">
A dismissable alert message. Primis nec primis parturient nullam maximus fermentum justo.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
<div class="container-xxl">
<div class="nav-wrapper">
<a class="navbar-brand" href="#">
<img src="../../../../assets/img/herrs.png" class="brand-img-sm" alt="Herr's" width="320" height="179">
<img src="../../../../assets/img/herrs.png" class="brand-img-lg" alt="Herr's" width="320" height="179">
</a>
<ul class="navbar-nav navbar-nav-primary justify-content-start">
<li class="nav-item has-dropdown" data-content="nav_01_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Fermentum odio feugiat</button>
</li>
<li class="nav-item has-dropdown" data-content="nav_02_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Nulla facilisi</button>
</li>
<li class="nav-item has-dropdown" data-content="nav_03_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Sem viverra aliquet</button>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-end">
<li class="nav-item">
<a href="#" class="nav-link">Duis ut diam quam</a>
</li>
<li class="nav-item">
<a href="#" class="btn btn-cta">CTA Button</a>
</li>
</ul>
</div>
<div class="navbar-nav-mobile">
<a href="#" class="btn btn-cta">Mobile CTA</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navOffscreenContent" aria-controls="navOffscreenContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="dropdown-bar">
<div class="dropdown-list">
<div class="dropdown-content">
<div id="nav_01_Items" class="nav-dropdown" aria="hidden" style="--kb-nav-dropdown-width: 10rem">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
<div id="nav_02_Items" class="nav-dropdown" aria="hidden">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 4</a>
</li>
</ul>
</div>
</div>
<div id="nav_03_Items" class="nav-dropdown" aria="hidden" style="--kb-nav-dropdown-width: 10rem">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="bg-layer bg-light"></div>
</div>
</div>
</nav>
<!-- Offcanvas Menu: BEGIN -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="navOffscreenContent" aria-label="Main Navigation">
<div class="offcanvas-header">
<button type="button" class="btn-close ms-auto me-3" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="accordion accordion-flush" id="accordionNavItems">
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_01_ItemsMenu" aria-expanded="false" aria-controls="nav_01_ItemsMenu">
Fermentum odio feugiat
</button>
</div>
<div id="nav_01_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_02_ItemsMenu" aria-expanded="false" aria-controls="nav_02_ItemsMenu">
Nulla facilisi
</button>
</div>
<div id="nav_02_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_03_ItemsMenu" aria-expanded="false" aria-controls="nav_03_ItemsMenu">
Sem viverra aliquet
</button>
</div>
<div id="nav_03_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Duis ut diam quam</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">CTA Button</a>
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Menu: END -->