Toasts

Black Toast

Alert!

Toast text


      <div class="toast-container position-fixed bottom-0 end-0
      p-3"> <div class="toast align-items-center"
      role="alert" aria-live="assertive"
      aria-atomic="true"> <div class="toast-body
      bg-stanford-black text-white"> <div
      class="d-flex"> <div class="bi
      bi-exclamation-circle-fill fs-3 me-3 align-self-center d-flex
      justify-content-center"></div> <div> <div
      class="fw-semibold">Alert!</div> <div>Toast
      text</div> </div> <div class=" me-2 m-auto">
      <button type="button" class="btn btn-text text-uppercase
      text-white">Undo</button> <button type="button"
      class="btn btn-close btn-close-white"
      aria-label="Close"></button> </div> </div>
      </div> </div> </div>

Stanford Digital Red Toast

Alert!

Toast text


      <div class="toast-container position-fixed bottom-0 end-0
      p-3"> <div class="toast align-items-center"
      role="alert" aria-live="assertive"
      aria-atomic="true"> <div class="toast-body
      bg-stanford-cardinal text-white"> <div
      class="d-flex"> <div class="bi
      bi-exclamation-triangle-fill fs-3 me-3 align-self-center d-flex
      justify-content-center"></div> <div> <div
      class="fw-semibold">Alert!</div> <div>Toast
      text</div> </div> <div class=" me-2 m-auto">
      <button type="button" class="btn btn-text text-uppercase
      text-white">Undo</button> <button type="button"
      class="btn btn-close btn-close-white"
      aria-label="Close"></button> </div> </div>
      </div> </div> </div>

Digital Green Toast

Alert!

Toast text


      <div class="toast-container position-fixed bottom-0 end-0
      p-3"> <div class="toast align-items-center"
      role="alert" aria-live="assertive"
      aria-atomic="true"> <div class="toast-body
      bg-stanford-digital-green text-white"> <div
      class="d-flex"> <div class="bi bi-check-circle-fill
      fs-3 me-3 align-self-center d-flex
      justify-content-center"></div> <div> <div
      class="fw-semibold">Alert!</div> <div>Toast
      text</div> </div> <div class=" me-2 m-auto">
      <button type="button" class="btn btn-text text-uppercase
      text-white">Undo</button> <button type="button"
      class="btn btn-close btn-close-white"
      aria-label="Close"></button> </div> </div>
      </div> </div> </div>

Poppy Dark Toast

Alert!

Toast text


      <div class="toast-container position-fixed bottom-0 end-0
      p-3"> <div class="toast align-items-center"
      role="alert" aria-live="assertive"
      aria-atomic="true"> <div class="toast-body
      bg-poppy-dark text-white"> <div class="d-flex">
      <div class="bi bi-exclamation-circle-fill fs-3 me-3
      align-self-center d-flex justify-content-center"></div>
      <div> <div class="fw-semibold">Alert!</div>
      <div>Toast text</div> </div> <div class=" me-2
      m-auto"> <button type="button" class="btn
      btn-text text-uppercase text-white">Undo</button> <button
      type="button" class="btn btn-close btn-close-white"
      aria-label="Close"></button> </div> </div>
      </div> </div> </div>