Inline message
Description coming soon
Example
<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" aria-hidden="true">
<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" aria-hidden="true">
<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" aria-hidden="true">
<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" aria-hidden="true">
<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
<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
<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" aria-hidden="true">
<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">
<span class="sr-only">Hide message</span>
<span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
</button>
</div>
<div class="nj-inline-message nj-inline-message--info">
<div class="nj-inline-message__status nj-status-indicator nj-status-indicator--info" aria-hidden="true">
<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">
<span class="sr-only">Hide message</span>
<span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
</button>
</div>
<div class="nj-inline-message nj-inline-message--success">
<div class="nj-inline-message__status nj-status-indicator nj-status-indicator--success" aria-hidden="true">
<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">
<span class="sr-only">Hide message</span>
<span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
</button>
</div>
<div class="nj-inline-message nj-inline-message--warning">
<div class="nj-inline-message__status nj-status-indicator nj-status-indicator--warning" aria-hidden="true">
<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">
<span class="sr-only">Hide message</span>
<span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
</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">
<span class="sr-only">Hide message</span>
<span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
</button>
</div>
</div>