CSS reference - Bifrost

Message

Basic message

The .bf-message can be combined with background color classes to create a highlighted message box:

<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>
<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>

Default (follow theme) with a link

Neutral with a link

Brand with a link

Chill with a link

Attention with a link

Success with a link

Warning with a link

Alert with a link

Message header

Add a header with .bf-message-header and an appropriate icon with .bf-message-icon:

<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>
<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>

Default (follow theme)

I can convey information, but with colors.

Attention

I am good at receiving attention, but only when you want me to.

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:

<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>
<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>