Message
Colored text box to highlight information
Message
Go to top
Also see /react/message
React component
Basic message
The .bf-message can be combined with background color classes to
create a highlighted message box:
HTML
<div class="bf-message bfc-theme-fade-bg">
Default (follow theme) with a <a href="#">link</a>
</div>
<div class="bf-message bfc-neutral-fade-bg">
Neutral with a <a href="#">link</a>
</div>
<div class="bf-message bfc-brand-fade-bg">
Brand with a <a href="#">link</a>
</div>
<div class="bf-message bfc-chill-fade-bg">
Chill with a <a href="#">link</a>
</div>
<div class="bf-message bfc-attn-fade-bg">
Attention with a <a href="#">link</a>
</div>
<div class="bf-message bfc-success-fade-bg">
Success with a <a href="#">link</a>
</div>
<div class="bf-message bfc-warning-fade-bg">
Warning with a <a href="#">link</a>
</div>
<div class="bf-message bfc-alert-fade-bg">
Alert with a <a href="#">link</a>
</div>Message header
Add a header with .bf-message-header and an appropriate icon with .bf-message-icon:
HTML
<div class="bf-message bfc-theme-fade-bg">
<header class="bf-message-header">
<i class="fa-solid fa-circle-info bf-message-icon"></i>
Default (follow theme)
</header>
I can convey information, but with colors.
</div>
<div class="bf-message bfc-attn-fade-bg">
<header class="bf-message-header">
<i class="fa-solid fa-heart bf-message-icon"></i>
Attention
</header>
I am good at receiving attention, but only when you want me to.
</div>Status bar
For important, one-line messages you can add .bf-message-statusbar along with
stronger colors and an appropriate icon with .bf-message-icon:
HTML
<div class="bf-message bf-message-statusbar bfc-theme-bg">
<i class="fa-solid fa-circle-info bf-message-icon"></i>
Default (follow theme) with a <a href="#">link</a>
</div>
<div class="bf-message bf-message-statusbar bfc-neutral-bg">
<i class="fa-solid fa-circle-info bf-message-icon"></i>
Neutral with a <a href="#">link</a>
</div>
<div class="bf-message bf-message-statusbar bfc-brand-bg">
<i class="fa-solid fa-circle-info bf-message-icon"></i>
Brand with a <a href="#">link</a>
</div>
<div class="bf-message bf-message-statusbar bfc-chill-bg">
<i class="fa-solid fa-circle-info bf-message-icon"></i>
Chill with a <a href="#">link</a>
</div>
<div class="bf-message bf-message-statusbar bfc-attn-bg">
<i class="fa-solid fa-circle-info bf-message-icon"></i>
Attention with a <a href="#">link</a>
</div>
<div class="bf-message bf-message-statusbar bfc-success-bg">
<i class="fa-solid fa-circle-info bf-message-icon"></i>
Success with a <a href="#">link</a>
</div>
<div class="bf-message bf-message-statusbar bfc-warning-bg">
<i class="fa-solid fa-circle-exclamation bf-message-icon"></i>
Warning with a <a href="#">link</a>
</div>
<div class="bf-message bf-message-statusbar bfc-alert-bg">
<i class="fa-solid fa-triangle-exclamation bf-message-icon"></i>
Alert with a <a href="#">link</a>
</div>Sandbox
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/solid.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/regular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/fontawesome.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css"> <link rel="stylesheet" href="styles.css"> <div class="bfl-grid bf-page-padding"> <div class="bf-message bfc-theme-fade-bg">bf-message bfc-theme-fade-bg</div> <div class="bf-message bfc-neutral-fade-bg"> <header class="bf-message-header"> <i class="fa-solid fa-circle-info bf-message-icon"></i> bf-message-header </header> bf-message bfc-neutral-fade-bg </div> <div class="bf-message bf-message-statusbar bfc-warning-bg"> <i class="fa-solid fa-circle-exclamation bf-message-icon"></i> bf-message-statusbar bfc-warning-bg </div> </div>