Alerts should be used to grab a user’s attention before proceeding to the next action. They are commonly found at the very top of the page directly above the content.
Useful when you want to display an alert for a predetermined amount of time.
Pack your bags! You'll be on the next flight to Hawaii.
Pack your bags! You'll be on the next flight to Tahiti.
Pack your bags! You'll be on the next flight to Corsica.
Used to display notes, tips, and other non-critical information.
Ten other people are also viewing tickets for this flight.
Use the code Travel_Light_2017 before you book your flight.
.alertUsed to display notes, tips, and other non-critical information.
Ten other people are also viewing tickets for this flight.
Use the code Travel_Light_2017 before you book your flight.
.alert-infoUseful when drawing attention to non-critical information or actions we want the user to take.
Ten other people are also viewing tickets for this flight.
Use the code Travel_Light_2017 before you book your flight.
.alert-successUseful when drawing attention to interactions that have produced successful results.
Pack your bags! You'll be on the next flight to Hawaii.
Use the code Travel_Light_2017 on your next flight. In the meantime you can invite a friend to this flight.
.alert-warningUseful when drawing attention to critical, time-sensitive information — even if nothing has gone wrong.
There are only 2 seats left on this flight! We recommend to book your tickets as soon as possible.
Use the code Travel_Light_2017 before you book your flight.
.alert-errorUseful when drawing attention to something that has gone critically wrong.
This flight is now sold out. Let's get you on the next flight to Kauai.
We hope the code Travel_Light_2017 will be useful for your next flight.