Inline message

Description coming soon

Example

Title error Message

Message description or remediation action

Title info Message

Message description or remediation action

Title success Message

Message description or remediation action

Title warning Message

Message description or remediation action

Title fatal error Message

Message description or remediation action

<div style="display: flex; flex-direction: column; flex-wrap: wrap; gap: 24px;">
  <div class="nj-inline-message">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--error">
      <div class="nj-status-indicator__svg"></div>
    </div>
    <div class="nj-inline-message__content">
       <h4 class="nj-inline-message__title">Title <b>error</b> Message</h4>
       <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
  </div>
  <div class="nj-inline-message nj-inline-message--info">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--info">
      <div class="nj-status-indicator__svg"></div>
    </div>
    <div class="nj-inline-message__content">
       <h4 class="nj-inline-message__title">Title <b>info</b> Message</h4>
       <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
  </div>
  <div class="nj-inline-message nj-inline-message--success">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--success">
      <div class="nj-status-indicator__svg"></div>
    </div>
    <div class="nj-inline-message__content">
       <h4 class="nj-inline-message__title">Title <b>success</b> Message</h4>
       <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
  </div>
  <div class="nj-inline-message nj-inline-message--warning">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--warning">
      <div class="nj-status-indicator__svg"></div>
    </div>
    <div class="nj-inline-message__content">
       <h4 class="nj-inline-message__title">Title <b>warning</b> Message</h4>
       <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
  </div>
  <div class="nj-inline-message nj-inline-message--fatal-error">
    <div class="nj-inline-message__content">
       <h4 class="nj-inline-message__title">Title <b>fatal error</b> Message</h4>
       <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--inverse">remediation action</a></p>
    </div>
  </div>
</div>

Without Status-indicator

Title error Message

Message description or remediation action

Title info Message

Message description or remediation action

Title success Message

Message description or remediation action

Title warning Message

Message description or remediation action

Title fatal error Message

Message description or remediation action

<div style="display: flex; flex-direction: column; flex-wrap: wrap; gap: 24px;">
  <div class="nj-inline-message">
    <div class="nj-inline-message__content">
       <h4 class="nj-inline-message__title">Title <b>error</b> Message</h4>
       <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
  </div>
  <div class="nj-inline-message nj-inline-message--info">
    <div class="nj-inline-message__content">
       <h4 class="nj-inline-message__title">Title <b>info</b> Message</h4>
       <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
  </div>
  <div class="nj-inline-message nj-inline-message--success">
    <div class="nj-inline-message__content">
       <h4 class="nj-inline-message__title">Title <b>success</b> Message</h4>
       <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
  </div>
  <div class="nj-inline-message nj-inline-message--warning">
    <div class="nj-inline-message__content">
       <h4 class="nj-inline-message__title">Title <b>warning</b> Message</h4>
       <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
  </div>
  <div class="nj-inline-message nj-inline-message--fatal-error">
    <div class="nj-inline-message__content">
       <h4 class="nj-inline-message__title">Title <b>fatal error</b> Message</h4>
       <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--inverse">remediation action</a></p>
    </div>
  </div>
</div>

Closable

Title error Message

Message description or remediation action

Title info Message

Message description or remediation action

Title success Message

Message description or remediation action

Title warning Message

Message description or remediation action

Title fatal error Message

Message description or remediation action

<div style="display: flex; flex-direction: column; flex-wrap: wrap; gap: 24px;">
  <div class="nj-inline-message">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--error">
      <div class="nj-status-indicator__svg"></div>
    </div>
    <div class="nj-inline-message__content">
       <h4 class="nj-inline-message__title">Title <b>error</b> Message</h4>
       <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
    <button class="nj-inline-message__close nj-icon-btn nj-icon-btn--secondary">
        <i class="nj-icon-btn__icon material-icons">close</i>
    </button>
  </div>
  <div class="nj-inline-message nj-inline-message--info">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--info">
      <div class="nj-status-indicator__svg"></div>
    </div>
    <div class="nj-inline-message__content">
       <h4 class="nj-inline-message__title">Title <b>info</b> Message</h4>
       <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
    <button class="nj-inline-message__close nj-icon-btn nj-icon-btn--secondary">
        <i class="nj-icon-btn__icon material-icons">close</i>
    </button>
  </div>
  <div class="nj-inline-message nj-inline-message--success">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--success">
      <div class="nj-status-indicator__svg"></div>
    </div>
    <div class="nj-inline-message__content">
       <h4 class="nj-inline-message__title">Title <b>success</b> Message</h4>
       <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
    <button class="nj-inline-message__close nj-icon-btn nj-icon-btn--secondary">
        <i class="nj-icon-btn__icon material-icons">close</i>
    </button>
  </div>
  <div class="nj-inline-message nj-inline-message--warning">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--warning">
      <div class="nj-status-indicator__svg"></div>
    </div>
    <div class="nj-inline-message__content">
       <h4 class="nj-inline-message__title">Title <b>warning</b> Message</h4>
       <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
    <button class="nj-inline-message__close nj-icon-btn nj-icon-btn--secondary">
        <i class="nj-icon-btn__icon material-icons">close</i>
    </button>
  </div>
  <div class="nj-inline-message nj-inline-message--fatal-error">
    <div class="nj-inline-message__content">
       <h4 class="nj-inline-message__title">Title <b>fatal error</b> Message</h4>
       <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--inverse">remediation action</a></p>
    </div>
    <button class="nj-inline-message__close nj-icon-btn nj-icon-btn--inverse">
        <i class="nj-icon-btn__icon material-icons">close</i>
    </button>
  </div>
</div>