Snackbar
Introduction
Snackbars provide brief messages about various processes at the bottom of the screen. These can range from simple messages to also having trigger buttons. The snackbars provided by Marvel UI are responsive as well.
Types of Snackbar
There are three types of snackbars available with Marvel UI: baseline & leading trailing.
By default, the snackbars live at the bottom of the website. Based on your requirement, you may position the snackbar either at the center, rightmost or on the leftmost side of the screen.
Code(CSS):
<!-- Baseline Snackbar -->
<div id="baseline-snackbar" class="snackbar baseline-center">
<p>Can't send photo. Retry in 5 seconds.</p>
<div class="flex-row gap-05 align-cntr">
<button class="btn">RETRY</button>
<button class="btn snack-close">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
<!-- Leading Snackbar -->
<div id="baseline-snackbar" class="snackbar leading">
<p>Can't send photo. Retry in 5 seconds.</p>
<div class="flex-row gap-05 align-cntr">
<button class="btn">RETRY</button>
<button class="btn snack-close">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
<!-- Trailing Snackbar -->
<div id="baseline-snackbar" class="snackbar trailing">
<p>Can't send photo. Retry in 5 seconds.</p>
<div class="flex-row gap-05 align-cntr">
<button class="btn">RETRY</button>
<button class="btn snack-close">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
</div>