Posh UI | Toast Component

Notification Toast

Notification from Posh UI

Hey! Now you can design your project faster and better with Posh UI

                    
<div class="toast">
  <div class="toast-head">
    Notification from Posh UI
    <button class="toast-cross">
      <i class="fas fa-times"></i>
    </button>
  </div>

  <p class="toast-msg">
    Hey! Now you can design your project faster and better with
    <a class="toast-link" href="https://poshui.netlify.app">
      Posh UI
    </a>
  </p>
</div>

Notification Toast Demo

                    
<button
  id="notification-toast-demo-btn"
  class="btn btn-primary-solid btn-squared"
>
  Toast Demo
</button>

<div id="notification-toast" class="d-none toast toast-fixed">
  <div class="toast-head">
    Notification from Posh UI
    <button id="toast-cross-btn" class="toast-cross">
      <i class="fas fa-times"></i>
    </button>
  </div>

  <p class="toast-msg">
    Hey! Now you can design your project faster and better with
    <a class="toast-link" href="https://poshui.netlify.app">
      Posh UI
    </a>
  </p>
</div>

Stacked Notification Toast Demo

Notification from Posh UI

Hey! Now you can design your project faster and better with Posh UI
Notification from Posh UI

Hey! Now you can design your project faster and better with Posh UI

                    
<button
  id="first-stacked-toast-btn"
  class="btn btn-primary-solid btn-squared"
>
  First Stacked Toast
</button>

<button
  id="second-stacked-toast-btn"
  class="btn btn-primary-solid btn-squared"
>
  Second Stacked Toast
</button>

<ul class="toast-fixed">
  <li class="mt-1">
    <div id="stacked-toast-2" class="d-none toast">
      <div class="toast-head">
        Notification from Posh UI
        <button
          id="stacked-toast-2-cross-btn"
          class="toast-cross"
        >
          <i class="fas fa-times"></i>
        </button>
      </div>

      <p class="toast-msg">
        Hey! Now you can design your project faster and better
        with
        <a class="toast-link" href="https://poshui.netlify.app">
          Posh UI
        </a>
      </p>
    </div>
  </li>

  <li class="mt-1">
    <div id="stacked-toast-1" class="d-none toast">
      <div class="toast-head">
        Notification from Posh UI
        <button
          id="stacked-toast-1-cross-btn"
          class="toast-cross"
        >
          <i class="fas fa-times"></i>
        </button>
      </div>

      <p class="toast-msg">
        Hey! Now you can design your project faster and better
        with
        <a class="toast-link" href="https://poshui.netlify.app">
          Posh UI
        </a>
      </p>
    </div>
  </li>
</ul>