Messaging

Success, Error, and Warning Messages

Use the following code snippets to add Success, Error, and Warning messaging to your page. The .page-message__action link is optional. To allow users to dismiss the message, include the optional .page-message__close markup, with inline svg.

Your settings have been saved. View your settings.
Oh no, something went wrong. Fix this error.
This warning message is dismissible.
Dismiss
 <div class="page-message page-message--success">
    <div class="page-message__text">
      <svg class="page-message__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
        <title>Success</title>
        <path d="M16.1 26.1c-.4 0-.8-.2-1.1-.5l-6.5-6.7 2.2-2.1 5.4 5.6 11.3-11 2.1 2.1-12.3 12.2c-.3.3-.7.4-1.1.4z"/>
      </svg>
      Your settings have been saved.
      <a class="page-message__action" href="#">View your settings.</a>
    </div>
  </div>
<div class="page-message page-message--error">
    <div class="page-message__text">
      <svg class="page-message__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
        <title>Error</title>
        <path d="M19 16.878l-6.364-6.363-2.12 2.12L16.878 19l-6.365 6.364 2.12 2.12L19 21.122l6.364 6.365 2.12-2.12L21.122 19l6.365-6.364-2.12-2.12L19 16.877z"/>
      </svg>
      Oh no, something went wrong.
      <a class="page-message__action" href="#">Fix this error.</a>
    </div>
  </div>
<div class="page-message page-message--warning">
    <div class="page-message__text">
      <svg class="page-message__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
        <title>Warning</title>
        <path d="M17.5 8.7h3v12.6h-3V8.7zM19 29.5c1.38 0 2.5-1.12 2.5-2.5s-1.12-2.5-2.5-2.5-2.5 1.12-2.5 2.5 1.12 2.5 2.5 2.5z"/>
      </svg>
    This warning message is dismissible.
    </div>
    <span class="page-message__close">
      <a href="#" aria-label="Dismiss message">
        <svg class="page-message__icon-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38">
          <title>Dismiss</title>
          <path d="M19 16.878l-6.364-6.363-2.12 2.12L16.878 19l-6.365 6.364 2.12 2.12L19 21.122l6.364 6.365 2.12-2.12L21.122 19l6.365-6.364-2.12-2.12L19 16.877z"/>
        </svg>
      </a>
    </span>
  </div>