Molecules | Banner Health Design System Developer Resource

button sets

stacked buttons

Modifier classes (for buttons):bh-primary-button--smallbh-primary-button--large / bh-text-button--smallbh-text-button--large
Other components needed (SCSS):
- Primary Button
- Text Button

SCSS file

<div class="bh-stacked-buttons">
	<button class="bh-primary-button">Button</button>
	<button class="bh-text-button">Button</button>
</div>

side by side buttons

Other components needed (SCSS):
- Primary Button
- Outlined 1 Button

SCSS file

<div class="bh-side-by-side-buttons">
	<button class="bh-outlined-1-button">Button</button>
	<button class="bh-primary-button">Button</button>
</div>

ui notifications

notification information

Modifier classes: bh-notification--full
Optional customization: Add the following as HTML data attributes to customize the notification.
data-bh-noti-parent: the ID of the parent in which the notification should live. Defaults to body.
data-bh-noti-timeout: the amount of time (in milliseconds) before the notification should disappear. By default, there is no timeout.
data-bh-noti-top: the amount of pixels (integer value) from the top of the parent the notification should appear. Defaults to 25.
Other components needed (icons):
- Info icon (change color to #0077c8)
- Close icon (change color to #56595d)
Notes:
- The notification can be opened with the JavaScript function openNoti('notiID') where notiID is the ID attribute of the bh-notification div. It can also be called via a trigger, explained below.
- The trigger for the notification should only be a button tag, for accessibility purposes. The value of the bh-notification-trigger's data-attribute data-noti-trigger must match the ID of the bh-notification div.
- Similarly, the notification can be closed with the JavaScript function closeNoti('notiID'). It can also be closed with a trigger button, etc. which has the bh-notification-close attribute.

SCSS file JS file

<p class="bh-body-1-main bh-body-1-main--preview">
	<button data-noti-trigger="bh-noti-info" class="bh-notification-trigger bh-primary-button">Trigger info notification</button> <br>
	<button data-noti-trigger="bh-noti-info-full" class="bh-notification-trigger bh-primary-button">Trigger full-screen info notification</button> <br>
	<button data-noti-trigger="bh-noti-info-dismiss" class="bh-notification-trigger bh-primary-button">Trigger dismissable info notification</button> <br>
	<button data-noti-trigger="bh-noti-info-customized" class="bh-notification-trigger bh-primary-button">Trigger customized info notification</button>
</p>

<div id="bh-noti-info" class="bh-notification" role="status" aria-hidden="true">
	<img class="bh-notification-icon" alt="Information" src="assets/toolkit/images/bh-ic-info-blue.svg" />
	<p class="bh-notification-copy">Informational message that is just wide enough to fit its text</p>
</div>

<div id="bh-noti-info-full" class="bh-notification bh-notification--full" role="status" aria-hidden="true">
	<img class="bh-notification-icon" alt="Information" src="assets/toolkit/images/bh-ic-info-blue.svg" />
	<p class="bh-notification-copy">Informational message that is full screen</p>
</div>

<div id="bh-noti-info-dismiss" class="bh-notification" role="status" aria-hidden="true">
	<img class="bh-notification-icon" alt="Information" src="assets/toolkit/images/bh-ic-info-blue.svg" />
	<p class="bh-notification-copy">Informational message that is dismissable</p>
	<button type="button" class="bh-notification-close" bh-notification-close><img class="bh-notification-icon" alt="Close notification" src="assets/toolkit/images/bh-ic-close-dark-gray.svg" /></button>
</div>

<div id="bh-noti-info-customized" class="bh-notification" data-bh-noti-parent="ui-notifications" data-bh-noti-timeout="3000" data-bh-noti-top="100" role="status" aria-hidden="true">
	<img class="bh-notification-icon" alt="Information" src="assets/toolkit/images/bh-ic-info-blue.svg" />
	<p class="bh-notification-copy">Informational message with a custom parent, timeout, and top margin</p>
</div>

notification information inline

Optional customization: Add the following as HTML data attributes to customize the notification.
data-bh-noti-timeout: the amount of time (in milliseconds) before the notification should disappear. By default, there is no timeout.
Other components needed (icons):
- Info icon (change color to #0077c8)
- Close icon (change color to #56595d)
Notes:
- The notification can be closed with the JavaScript function closeNoti('notiID'). It can also be closed with a trigger button, etc. which has the bh-notification-close attribute.

Informational message

Informational message that is dismissable

Informational message with a custom timeout

SCSS file JS file

<div id="bh-noti-info-inline" class="bh-notification-inline bh-notification-inline--info open" role="status" aria-hidden="false">
	<img class="bh-notification-inline-icon" alt="Information" src="assets/toolkit/images/bh-ic-info-blue.svg" />
	<p class="bh-notification-inline-copy">Informational message</p>
</div>

<div id="bh-noti-info-inline-dismiss" class="bh-notification-inline bh-notification-inline--info open" role="status" aria-hidden="false">
	<img class="bh-notification-inline-icon" alt="Information" src="assets/toolkit/images/bh-ic-info-blue.svg" />
	<p class="bh-notification-inline-copy">Informational message that is dismissable</p>
	<button type="button" class="bh-notification-inline-close" bh-notification-close><img class="bh-notification-inline-icon" alt="Close notification" src="assets/toolkit/images/bh-ic-close-dark-gray.svg" /></button>
</div>

<div id="bh-noti-info-customized" class="bh-notification-inline bh-notification-inline--info open" data-bh-noti-timeout="3000" role="status" aria-hidden="false">
	<img class="bh-notification-inline-icon" alt="Information" src="assets/toolkit/images/bh-ic-info-blue.svg" />
	<p class="bh-notification-inline-copy">Informational message with a custom timeout</p>
</div>

notification confirmation

Modifier classes & optional customizations: uses the same ones as Notification Information
Other components needed (icons):
- Success icon (change color to #008522)
- Close icon (change color to #56595d)
Other components needed (CSS/JS):
- Notification Information

Confirmation message that is just wide enough to fit its text

Confirmation message that is full screen

Confirmation message that is dismissable

Confirmation message with a custom parent, timeout, and top margin

<p class="bh-body-1-main bh-body-1-main--preview">
	<button data-noti-trigger="bh-noti-conf" class="bh-notification-trigger bh-primary-button">Trigger confirmation notification</button> <br>
	<button data-noti-trigger="bh-noti-conf-full" class="bh-notification-trigger bh-primary-button">Trigger full-screen confirmation notification</button> <br>
	<button data-noti-trigger="bh-noti-conf-dismiss" class="bh-notification-trigger bh-primary-button">Trigger dismissable confirmation notification</button> <br>
	<button data-noti-trigger="bh-noti-conf-customized" class="bh-notification-trigger bh-primary-button">Trigger customized confirmation notification</button>
</p>

<div id="bh-noti-conf" class="bh-notification" role="status">
	<img class="bh-notification-icon" alt="Confirmation" src="assets/toolkit/images/bh-ic-success-green.svg" />
	<p class="bh-notification-copy">Confirmation message that is just wide enough to fit its text</p>
</div>

<div id="bh-noti-conf-full" class="bh-notification bh-notification--full" role="status">
	<img class="bh-notification-icon" alt="Confirmation" src="assets/toolkit/images/bh-ic-success-green.svg" />
	<p class="bh-notification-copy">Confirmation message that is full screen</p>
</div>

<div id="bh-noti-conf-dismiss" class="bh-notification" role="status">
	<img class="bh-notification-icon" alt="Confirmation" src="assets/toolkit/images/bh-ic-success-green.svg" />
	<p class="bh-notification-copy">Confirmation message that is dismissable</p>
	<button type="button" class="bh-notification-close" bh-notification-close><img class="bh-notification-icon" alt="Close notification" src="assets/toolkit/images/bh-ic-close-dark-gray.svg" /></button>
</div>

<div id="bh-noti-conf-customized" class="bh-notification" data-bh-noti-parent="ui-notifications" data-bh-noti-timeout="3000" data-bh-noti-top="100" role="status">
	<img class="bh-notification-icon" alt="Confirmation" src="assets/toolkit/images/bh-ic-success-green.svg" />
	<p class="bh-notification-copy">Confirmation message with a custom parent, timeout, and top margin</p>
</div>

notification confirmation inline

Optional customization: Add the following as HTML data attributes to customize the notification.
data-bh-noti-timeout: the amount of time (in milliseconds) before the notification should disappear. By default, there is no timeout.
Other components needed (icons):
- Success icon (change color to #008522)
- Close icon (change color to #56595d)
Notes:
- The notification can be closed with the JavaScript function closeNoti('notiID'). It can also be closed with a trigger button, etc. which has the bh-notification-close attribute.
Other components needed (CSS/JS):
- Notification Information Inline

Informational message

Informational message that is dismissable

Informational message with a custom timeout

<div id="bh-noti-conf-inline" class="bh-notification-inline bh-notification-inline--confirmation open" role="status" aria-hidden="false">
	<img class="bh-notification-inline-icon" alt="Confirmation" src="assets/toolkit/images/bh-ic-success-green.svg" />
	<p class="bh-notification-inline-copy">Informational message</p>
</div>

<div id="bh-noti-conf-inline-dismiss" class="bh-notification-inline bh-notification-inline--confirmation open" role="status" aria-hidden="false">
	<img class="bh-notification-icon" alt="Confirmation" src="assets/toolkit/images/bh-ic-success-green.svg" />
	<p class="bh-notification-inline-copy">Informational message that is dismissable</p>
	<button type="button" class="bh-notification-inline-close" bh-notification-close><img class="bh-notification-inline-icon" alt="Close notification" src="assets/toolkit/images/bh-ic-close-dark-gray.svg" /></button>
</div>

<div id="bh-noti-conf-customized" class="bh-notification-inline bh-notification-inline--confirmation open" data-bh-noti-timeout="3000" role="status" aria-hidden="false">
	<img class="bh-notification-inline-icon" alt="Confirmation" src="assets/toolkit/images/bh-ic-success-green.svg" />
	<p class="bh-notification-inline-copy">Informational message with a custom timeout</p>
</div>

notification error

Modifier classes & optional customizations: uses the same ones as Notification Information
Other components needed (icons):
- Alert icon (change color to #da291c)
- Close icon (change color to #56595d)
Other components needed (CSS/JS):
- Notification Information

Error message that is just wide enough to fit its text

Error message that is full screen

Error message that is dismissable

Error message with a custom parent, timeout, and top margin

<p class="bh-body-1-main bh-body-1-main--preview">
	<button data-noti-trigger="bh-noti-error" class="bh-notification-trigger bh-primary-button">Trigger error notification</button> <br>
	<button data-noti-trigger="bh-noti-error-full" class="bh-notification-trigger bh-primary-button">Trigger full-screen error notification</button> <br>
	<button data-noti-trigger="bh-noti-error-dismiss" class="bh-notification-trigger bh-primary-button">Trigger dismissable error notification</button> <br>
	<button data-noti-trigger="bh-noti-error-customized" class="bh-notification-trigger bh-primary-button">Trigger customized error notification</button>
</p>

<div id="bh-noti-error" class="bh-notification" role="alert">
	<img class="bh-notification-icon" alt="Error" src="assets/toolkit/images/bh-ic-alert-red.svg" />
	<p class="bh-notification-copy">Error message that is just wide enough to fit its text</p>
</div>

<div id="bh-noti-error-full" class="bh-notification bh-notification--full" role="alert">
	<img class="bh-notification-icon" alt="Error" src="assets/toolkit/images/bh-ic-alert-red.svg" />
	<p class="bh-notification-copy">Error message that is full screen</p>
</div>

<div id="bh-noti-error-dismiss" class="bh-notification" role="alert">
	<img class="bh-notification-icon" alt="Error" src="assets/toolkit/images/bh-ic-alert-red.svg" />
	<p class="bh-notification-copy">Error message that is dismissable</p>
	<button type="button" class="bh-notification-close" bh-notification-close><img class="bh-notification-icon" alt="Close notification" src="assets/toolkit/images/bh-ic-close-dark-gray.svg" /></button>
</div>

<div id="bh-noti-error-customized" class="bh-notification" data-bh-noti-parent="ui-notifications" data-bh-noti-timeout="3000" data-bh-noti-top="100" role="alert">
	<img class="bh-notification-icon" alt="Error" src="assets/toolkit/images/bh-ic-alert-red.svg" />
	<p class="bh-notification-copy">Error message with a custom parent, timeout, and top margin</p>
</div>

notification error inline

Optional customization: Add the following as HTML data attributes to customize the notification.
data-bh-noti-timeout: the amount of time (in milliseconds) before the notification should disappear. By default, there is no timeout.
Other components needed (icons):
- Alert icon (change color to #da291c)
- Close icon (change color to #56595d)
Notes:
- The notification can be closed with the JavaScript function closeNoti('notiID'). It can also be closed with a trigger button, etc. which has the bh-notification-close attribute.
Other components needed (CSS/JS):
- Notification Information Inline

Informational message

Informational message that is dismissable

Informational message with a custom timeout

<div id="bh-noti-error-inline" class="bh-notification-inline bh-notification-inline--error open" role="status" aria-hidden="false">
	<img class="bh-notification-inline-icon" alt="Error" src="assets/toolkit/images/bh-ic-alert-red.svg" />
	<p class="bh-notification-inline-copy">Informational message</p>
</div>

<div id="bh-noti-error-inline-dismiss" class="bh-notification-inline bh-notification-inline--error open" role="status" aria-hidden="false">
	<img class="bh-notification-inline-icon" alt="Error" src="assets/toolkit/images/bh-ic-alert-red.svg" />
	<p class="bh-notification-inline-copy">Informational message that is dismissable</p>
	<button type="button" class="bh-notification-inline-close" bh-notification-close><img class="bh-notification-inline-icon" alt="Close notification" src="assets/toolkit/images/bh-ic-close-dark-gray.svg" /></button>
</div>

<div id="bh-noti-error-customized" class="bh-notification-inline bh-notification-inline--error open" data-bh-noti-timeout="3000" role="status" aria-hidden="false">
	<img class="bh-notification-inline-icon" alt="Error" src="assets/toolkit/images/bh-ic-alert-red.svg" />
	<p class="bh-notification-inline-copy">Informational message with a custom timeout</p>
</div>

dialogs

dialog desktop

Modifier classes:
bh-dialog--mobile-full: this makes the mobile version of the modal full screen below 480px.
Optional customization: Add the following as HTML data attributes to customize the notification.
data-bh-dialog-top: the amount of pixels (integer value) from the top of the page the notification should appear. This attribute would be added to the bh-dialog div. By default, this is turned off and the dialog is centered on the page.
Accessibility updates needed:
Sample content is included in the dialogs below, but the following changes must be included:
- Update the #bh-dialog-title and #bh-dialog-description copy to describe the dialog. The sr-only class can be added to either if the copy is not necessary for your design.
- Add the following to any button that will close the dialog: class="bh-dialog-close" aria-label="Close dialog".
Notes:
- The dialog can be opened with the JavaScript function openDialog('dialogID') where dialogID is the ID attribute of the bh-dialog div. It can also be called via a trigger, explained below.
- Similarly, the dialog can be closed with the JavaScript function closeDialog(). It can also be closed with a trigger button, etc. which has the bh-dialog-close attribute.
- The trigger for the dialog should only be a button tag, for accessibility purposes. The button can be re-styled as needed to fit the context. The value of the bh-dialog-trigger's data-attribute data-dialog-trigger must match the ID of the bh-dialog div.
- The dialog modal itself requires very little HTML (just the outer .bh-dialog div). The rest of the HTML for the first example below is taken from other components in the design system. Their styles are located here: Headings (H3b), Body Copy (Body 1 Main), Primary Button (Large), Text Button (Large), and Stacked Buttons

SCSS file JS file

<p class="bh-body-1-main bh-body-1-main--preview">
	<button type="button" class="bh-dialog-trigger bh-primary-button" aria-label="Open dialog" data-dialog-trigger="bh-dialog">Trigger a sample dialog</button><br>
	<button type="button" class="bh-dialog-trigger bh-primary-button" aria-label="Open dialog" data-dialog-trigger="bh-dialog-2">A dialog with custom options</button><br>
	<button type="button" class="bh-dialog-trigger bh-primary-button" aria-label="Open dialog" data-dialog-trigger="bh-dialog-3">Full-screen mobile dialog</button>
</p>

<div id="bh-dialog" class="bh-dialog" role="dialog" aria-labelledby="bh-dialog-title" aria-describedby="bh-dialog-description" aria-hidden="true">
	<svg class="bh-svg-alert" width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false">
		<title>Alert</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M32,0 C49.673112,0 64,14.326888 64,32 C64,49.673112 49.673112,64 32,64 C14.326888,64 0,49.673112 0,32 C0,14.326888 14.326888,0 32,0 Z M32,3 C15.9837423,3 3,15.9837423 3,32 C3,48.0162577 15.9837423,61 32,61 C48.0162577,61 61,48.0162577 61,32 C61,15.9837423 48.0162577,3 32,3 Z M33.9775,40.08 L33.9775,44 L30.0225,44 L30.0225,40.08 L33.9775,40.08 Z M33.7325,20.655 L33.6625,37.28 L30.3375,37.28 L30.2325,20.655 L33.7325,20.655 Z" fill="#0077c8"></path>
		</g>
	</svg>
	<h3 id="bh-dialog-title" class="bh-heading-h3b">Specific question?</h3>
	<p id="bh-dialog-description" class="bh-body-1-main">Supporting text that explains what confirmation action will do.</p>
	<div class="bh-stacked-buttons">
		<button class="bh-primary-button bh-primary-button--large">Confirm</button>
		<button class="bh-text-button bh-text-button--large bh-dialog-close" aria-label="Close dialog">Cancel</button>
	</div>
</div>

<div id="bh-dialog-2" class="bh-dialog" role="dialog" aria-labelledby="bh-dialog-title-2" aria-describedby="bh-dialog-description-2" data-bh-dialog-top="50" aria-hidden="true">
	<svg class="bh-svg-alert" width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false">
		<title>Alert</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M32,0 C49.673112,0 64,14.326888 64,32 C64,49.673112 49.673112,64 32,64 C14.326888,64 0,49.673112 0,32 C0,14.326888 14.326888,0 32,0 Z M32,3 C15.9837423,3 3,15.9837423 3,32 C3,48.0162577 15.9837423,61 32,61 C48.0162577,61 61,48.0162577 61,32 C61,15.9837423 48.0162577,3 32,3 Z M33.9775,40.08 L33.9775,44 L30.0225,44 L30.0225,40.08 L33.9775,40.08 Z M33.7325,20.655 L33.6625,37.28 L30.3375,37.28 L30.2325,20.655 L33.7325,20.655 Z" fill="#0077c8"></path>
		</g>
	</svg>
	<h3 id="bh-dialog-title-2" class="bh-heading-h3b">A dialog anchored near the top</h3>
	<p id="bh-dialog-description-2" class="bh-body-1-main">Instead of being centered, this dialog is 50px from the top of the screen</p>
	<div class="bh-stacked-buttons">
		<button class="bh-primary-button bh-primary-button--large">Confirm</button>
		<button class="bh-text-button bh-text-button--large bh-dialog-close" aria-label="Close dialog">Cancel</button>
	</div>
</div>

<div id="bh-dialog-3" class="bh-dialog bh-dialog--mobile-full" role="dialog" aria-labelledby="bh-dialog-title-3" aria-describedby="bh-dialog-description-3" aria-hidden="true">
	<svg class="bh-svg-alert" width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false">
		<title>Alert</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M32,0 C49.673112,0 64,14.326888 64,32 C64,49.673112 49.673112,64 32,64 C14.326888,64 0,49.673112 0,32 C0,14.326888 14.326888,0 32,0 Z M32,3 C15.9837423,3 3,15.9837423 3,32 C3,48.0162577 15.9837423,61 32,61 C48.0162577,61 61,48.0162577 61,32 C61,15.9837423 48.0162577,3 32,3 Z M33.9775,40.08 L33.9775,44 L30.0225,44 L30.0225,40.08 L33.9775,40.08 Z M33.7325,20.655 L33.6625,37.28 L30.3375,37.28 L30.2325,20.655 L33.7325,20.655 Z" fill="#0077c8"></path>
		</g>
	</svg>
	<h3 id="bh-dialog-title-3" class="bh-heading-h3b">Full screen mobile dialog</h3>
	<p id="bh-dialog-description-3" class="bh-body-1-main">Description text for a large dialog.</p>
	<p class="bh-body-1-main">Longer supporting text that explains what confirmation action will do. Longer supporting text that explains what confirmation action will do. Longer supporting text that explains what confirmation action will do. Longer supporting text that explains what confirmation action will do. Longer supporting text that explains what confirmation action will do. Longer supporting text that explains what confirmation action will do.</p>
	<p class="bh-body-1-main">Longer supporting text that explains what confirmation action will do. Longer supporting text that explains what confirmation action will do. Longer supporting text that explains what confirmation action will do. Longer supporting text that explains what confirmation action will do. Longer supporting text that explains what confirmation action will do. Longer supporting text that explains what confirmation action will do.</p>
	<div class="bh-stacked-buttons">
		<button class="bh-primary-button bh-primary-button--large">Confirm</button>
		<button class="bh-text-button bh-text-button--large bh-dialog-close" aria-label="Close dialog">Cancel</button>
	</div>
</div>

intake

progress bar

Modifier classes (for bh-progress-bar-step):bh-progress-bar-step-filled
Note: The above class is added to the active page in the progress bar.

SCSS file

<!-- 2 pages -->
<div class="bh-progress-bar bh-progress-bar--halves">
	<div class="bh-progress-bar-step bh-progress-bar-step--1 bh-progress-bar-step-filled"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--2"></div>
</div>

<!-- 3 pages -->
<div class="bh-progress-bar bh-progress-bar--thirds">
	<div class="bh-progress-bar-step bh-progress-bar-step--1 bh-progress-bar-step-filled"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--2"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--3"></div>
</div>

<!-- 4 pages -->
<div class="bh-progress-bar bh-progress-bar--quarters">
	<div class="bh-progress-bar-step bh-progress-bar-step--1 bh-progress-bar-step-filled"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--2"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--3"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--4"></div>
</div>

<!-- 5 pages -->
<div class="bh-progress-bar bh-progress-bar--fifths">
	<div class="bh-progress-bar-step bh-progress-bar-step--1 bh-progress-bar-step-filled"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--2"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--3"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--4"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--5"></div>
</div>

<!-- 6 pages -->
<div class="bh-progress-bar bh-progress-bar--sixths">
	<div class="bh-progress-bar-step bh-progress-bar-step--1 bh-progress-bar-step-filled"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--2"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--3"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--4"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--5"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--6"></div>
</div>

<!-- 7 pages -->
<div class="bh-progress-bar bh-progress-bar--sevenths">
	<div class="bh-progress-bar-step bh-progress-bar-step--1 bh-progress-bar-step-filled"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--2"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--3"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--4"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--5"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--6"></div>
	<div class="bh-progress-bar-step bh-progress-bar-step--7"></div>
</div>

navigation

pagination nav

Modifier classes: pagination-nav--small
Optional customizations:
- The available options for Materialize Pagination are explained here.
- There have been new options created as well:
maxVisiblePages: This defines the maximum amount of pages shown at a time in the pagination, not including the first or last pages. Valid values are 3, 5, 7, 9, 11. The default is 3.
showWords: This controls whether the words "Prev" and "Next" are shown next to the arrows on the buttons. The default is true.
smallVersion: This adds the class pagination-nav--small to the pagination-nav div. This is recommended to be used with breakpoints below. The default is false.
responsive: This option allows you to define an array of breakpoints, which change the maxVisiblePages, showWords, and smallVersion values at these breakpoints (and below). An example is given in the JavaScript tab below.
Notes:
- This component is built using jQuery and a custom version of Materialize Pagination. The following JS files are needed: jQuery | Materialize Pagination. The script tags needed are at the bottom of the HTML below.

SCSS file JS file

<nav class="pagination-nav pagination-nav-example"></nav>

<!-- Include the 2 scripts below, before </body>, if you are not using the whole toolkit -->
<!--
    <script src="path-to-file/jquery-3.4.1.min.js"></script>
    <script src="path-to-file/materialize-pagination.custom.js"></script>
-->