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.
New Feature Badge
A badge variant extending standard Bootstrap badge component for highlighting new software features. It is designed to draw attention to recently shipped functionality within the product and should be removed once a feature is no longer considered new.
Usage
To use the New Feature badge simply nest in inside the page or section heading tag. The New Feature badge is a badge badge-pill variant with a custom modifier class badge-new-feature, utility class ml-1 is used to help with spacing.
<span class="badge badge-pill badge-new-feature ml-1"> <loc name="common:new">[New]</loc></span>The New Feature badge is a temporary UI element. Once a feature no longer requires prominent callout the badge should be removed to reduce visual noise and prevent the label from becoming meaningless.
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.