Alerts

Warning

Here is a warning about something.

Text Link

Error

Here is an error about something.

Text Link

Informational

Here is information about something.

Text Link

Success

Here is confirmation about something.

Text Link

HTML

<div class="fizz-alert-warning">
  <div class="fizz--alert-links">
    <button class="fizz-button-small">Default Button</button>
    <a href="#"
       class="fizz-link">Text Link</a>
  </div>
</div>

<div class="fizz-alert-error">
  <div>
    <p><strong>Error</strong></p>
    <p>Here is an error about something.</p>
  </div>
  <div class="fizz--alert-links">
    <button class="fizz-button-small">Default Button</button>
    <a href="#"
       class="fizz-link">Text Link</a>
  </div>
</div>

<div class="fizz-alert-info">
  <div>
    <p><strong>Informational</strong></p>
    <p>Here is information about something.</p>
  </div>
  <div class="fizz--alert-links">
    <button class="fizz-button-small">Default Button</button>
    <a href="#"
       class="fizz-link">Text Link</a>
  </div>
</div>

<div class="fizz-alert-success">
  <div>
    <p><strong>Success</strong></p>
    <p>Here is confirmation about something.</p>
  </div>
  <div class="fizz--alert-links">
    <button class="fizz-button-small">Default Button</button>
    <a href="#"
       class="fizz-link">Text Link</a>
  </div>
</div>

Small

Functionally the same as regular alerts, but with a brief, one line description and no title.

Here is a warning about something.

Text Link

Here is an error about something.

Text Link

Here is some information about something.

Text Link

Here is a confirmation about something.

Text Link

HTML

<div class="fizz-alert-warning fizz-alert--small">
  <p>Here is a warning about something.</p>
  <div class="fizz--alert-links">
    <button class="fizz-button-small">Default Button</button>
    <a href="#"
       class="fizz-link">Text Link</a>
  </div>
</div>

Dismissable

Warning

Here is a warning about something.

Text Link

HTML

<div class="fizz-alert-warning">
  <button class="fizz-close-button">
    <svg width="24"
         height="24"
         viewBox="0 0 24 24"
         fill="none"
         xmlns="http://www.w3.org/2000/svg">
      <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
            fill="#1B1B1B" />
    </svg>
  </button>
  <div>
    <p><strong>Warning</strong></p>
    <p>Here is a warning about something.</p>
  </div>
  <div class="fizz--alert-links">
    <button class="fizz-button-small">Default Button</button>
    <a href="#"
       class="fizz-link">Text Link</a>
  </div>
</div>

Flash Message Container

You can add any number of alerts to a .fizz-flash-message-container give them a drop-shadow and position them absolutely on the page, relative to a parent container with .fizz-relative applied.

Error

Here is an error about something.

Error

Here is an error about something.

Text Link

HTML

<div class="fizz-relative"
     style="height: 200px">
  <div class="fizz-flash-message-container">
    <div class="fizz-alert-error">
      <button class="fizz-close-button">
        <svg class="fizz-icon-24"
             viewBox="0 0 24 24"
             fill="none"
             xmlns="http://www.w3.org/2000/svg">
          <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
                fill="#1B1B1B" />
        </svg>
      </button>
      <div>
        <p><strong>Error</strong></p>
        <p>Here is an error about something.</p>
      </div>
    </div>
    <div class="fizz-alert-error">
      <button class="fizz-close-button">
        <svg class="fizz-icon-24"
             viewBox="0 0 24 24"
             fill="none"
             xmlns="http://www.w3.org/2000/svg">
          <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
                fill="#1B1B1B" />
        </svg>

      </button>
      <p><strong>Error</strong></p>
      <p>Here is another error about something.</p>
      <div class="fizz--alert-links">
        <button class="fizz-button-small">Default Button</button>
        <a href="#"
           class="fizz-link">Text Link</a>
      </div>
    </div>
  </div>
</div>