Claromentis Design
Bootstrap Components
Bootstrap Components
Introduction
Claromentis utilizes the Bootstrap Frontend Framework for its product interface. In Claromentis 9+ we have extended some of Bootstraps UI components to better align with our design goals and improve flexibility.
Small Alert Component
The Small Alert component is an extended version of Bootstrap’s native Alert.
It provides a less prominent notification, typically used for more subtle messages that span a single line (on desktop view).
Usage
To use the Small Alert, apply the class alert-sm in conjunction with Bootstrap's standard alert classes:
<div class="alert alert-primary alert-sm" role="alert"> A simple primary small alert—check it out!</div>This can be used with each of the standard Contextual Bootstrap variants:
Small Alerts with Badges and Icons
For more prominent, attention-grabbing small alerts, you can combine them with the <cla-badge> component and Ionicons.
This approach is useful for creating alerts that require additional emphasis or visual context.
<div class="alert alert-primary alert-sm" role="alert"> <cla-badge class="badge badge-pill badge-warning mr-2"> <ion-icon name="information-circle"></ion-icon> Safe mode </cla-badge> Component content is saved but not displayed in order to assist with troubleshooting</div>Note Please refer to the Alerts & Messages pattern for more information on when to use an Alert.