Toast Notification
Notification: info + data-timeout="default"
<div class="ey-notification--info" role="alert" data-varient="toast" data-timeout="default">
<div class="ey-row ey-no-gutter">
<div class="ey-column ey-align-center">
<div class="ey-font__text--xsmall">Info: Title</div>
</div>
</div>
</div>
Notification: error + data-animation="true"
<div class="ey-notification--error" role="alert" data-varient="toast" data-animation="true">
<div class="ey-row ey-no-gutter">
<div class="ey-column ey-align-center">
<div class="ey-font__text--xsmall">Error: Title</div>
</div>
</div>
</div>
Notification: Warning
<div class="ey-notification--warning" role="alert" data-varient="toast">
<div class="ey-row ey-no-gutter">
<div class="ey-column ey-align-center">
<div class="ey-font__text--xsmall">Warning: Unable to add passport to your profile</div>
</div>
</div>
</div>
Warning: Unable to add passport to your profile
Notification: Success
<div class="ey-notification--success" role="alert" data-varient="toast">
<div class="ey-row ey-no-gutter">
<div class="ey-column ey-align-center">
<div class="ey-font__text--xsmall">Success: Title</div>
</div>
</div>
</div>
Notification: Warning + data-icon="false"
<div class="ey-notification--warning" role="alert" data-varient="toast" data-icon="false">
<div class="ey-row ey-no-gutter">
<div class="ey-column ey-align-center">
<div class="ey-font__text--xsmall">Overweight baggage removed</div>
</div>
</div>
</div>
Overweight baggage removed
Notification: data-position="bottom" + data-theme="dark"
<div class="ey-notification--info" role="alert" data-varient="toast" data-position="bottom" data-theme="dark" data-animation="true">
<div class="ey-row ey-no-gutter">
<div class="ey-column ey-align-center">
<div class="ey-font__text--xsmall">Info: Title</div>
</div>
</div>
</div>