This alert is shown when the button is clicked and can be
closed.
<div>
<div id="triggered-alert" class="alert alert--pumpkin alert--hidden">
<div class="alert__content">
<div class="alert__title">Triggered Alert</div>
<div class="alert__message">
This alert is shown when the button is clicked and can be
closed.
</div>
</div>
<button class="btn btn-icon alert__close">
<i data-lucide="x"></i>
</button>
</div>
<button id="trigger-button" class="btn btn-gradient mt-3">Show Alert</button>
</div>
Default Alerts
Pumpkin Alert
This is a simple alert message using the pumpkin color.
Orange Alert
This is an alert using the orange color.
Dark Blue Alert
This is an alert using the dark blue color.
Light Blue Alert
This is an alert using the light blue color.
Violet Alert
This is an alert using the violet color.
Yellow Alert
This is an alert using the Yellow color.
Aquamarine Alert
This is an alert using the aquamarine color.
Apricot Alert
This is an alert using the apricot color.
<div class="alert-wrap">
<div class="alert alert--pumpkin">
<div class="alert__content">
<div class="alert__title">Pumpkin Alert</div>
<div class="alert__message">
This is a simple alert message using the pumpkin color.
</div>
</div>
</div>
<div class="alert alert--orange">
<div class="alert__content">
<div class="alert__title">Orange Alert</div>
<div class="alert__message">
This is an alert using the orange color.
</div>
</div>
</div>
<div class="alert alert--darkblue">
<div class="alert__content">
<div class="alert__title">Dark Blue Alert</div>
<div class="alert__message">
This is an alert using the dark blue color.
</div>
</div>
</div>
<div class="alert alert--lightblue">
<div class="alert__content">
<div class="alert__title">Light Blue Alert</div>
<div class="alert__message">
This is an alert using the light blue color.
</div>
</div>
</div>
<div class="alert alert--violet">
<div class="alert__content">
<div class="alert__title">Violet Alert</div>
<div class="alert__message">
This is an alert using the violet color.
</div>
</div>
</div>
<div class="alert alert--yellow">
<div class="alert__content">
<div class="alert__title">Yellow Alert</div>
<div class="alert__message">
This is an alert using the Yellow color.
</div>
</div>
</div>
<div class="alert alert--aquamarine">
<div class="alert__content">
<div class="alert__title">Aquamarine Alert</div>
<div class="alert__message">
This is an alert using the aquamarine color.
</div>
</div>
</div>
<div class="alert alert--apricot">
<div class="alert__content">
<div class="alert__title">Apricot Alert</div>
<div class="alert__message">
This is an alert using the apricot color.
</div>
</div>
</div>
</div>
Alerts With Close
Alerts With Close
Pumpkin Alert
This is a simple alert message using the pumpkin color.
Orange Alert
This is an alert using the orange color.
Dark Blue Alert
This is an alert using the dark blue color.
Light Blue Alert
This is an alert using the light blue color.
Violet Alert
This is an alert using the violet color.
Yellow Alert
This is an alert using the Yellow color.
Aquamarine Alert
This is an alert using the aquamarine color.
Apricot Alert
This is an alert using the apricot color.
<div class="alert-wrap">
<h2>Alerts With Close</h2>
<div class="alert alert--pumpkin">
<div class="alert__content">
<div class="alert__title">Pumpkin Alert</div>
<div class="alert__message">
This is a simple alert message using the pumpkin color.
</div>
</div>
<button class="btn btn-icon alert__close">
<i data-lucide="x"></i>
</button>
</div>
<div class="alert alert--orange">
<div class="alert__content">
<div class="alert__title">Orange Alert</div>
<div class="alert__message">
This is an alert using the orange color.
</div>
</div>
<button class="btn btn-icon alert__close">
<i data-lucide="x"></i>
</button>
</div>
<div class="alert alert--darkblue">
<div class="alert__content">
<div class="alert__title">Dark Blue Alert</div>
<div class="alert__message">
This is an alert using the dark blue color.
</div>
</div>
<button class="btn btn-icon alert__close">
<i data-lucide="x"></i>
</button>
</div>
<div class="alert alert--lightblue">
<div class="alert__content">
<div class="alert__title">Light Blue Alert</div>
<div class="alert__message">
This is an alert using the light blue color.
</div>
</div>
<button class="btn btn-icon alert__close">
<i data-lucide="x"></i>
</button>
</div>
<div class="alert alert--violet">
<div class="alert__content">
<div class="alert__title">Violet Alert</div>
<div class="alert__message">
This is an alert using the violet color.
</div>
</div>
<button class="btn btn-icon alert__close">
<i data-lucide="x"></i>
</button>
</div>
<div class="alert alert--yellow">
<div class="alert__content">
<div class="alert__title">Yellow Alert</div>
<div class="alert__message">
This is an alert using the Yellow color.
</div>
</div>
<button class="btn btn-icon alert__close">
<i data-lucide="x"></i>
</button>
</div>
<div class="alert alert--aquamarine">
<div class="alert__content">
<div class="alert__title">Aquamarine Alert</div>
<div class="alert__message">
This is an alert using the aquamarine color.
</div>
</div>
<button class="btn btn-icon alert__close">
<i data-lucide="x"></i>
</button>
</div>
<div class="alert alert--apricot">
<div class="alert__content">
<div class="alert__title">Apricot Alert</div>
<div class="alert__message">
This is an alert using the apricot color.
</div>
</div>
<button class="btn btn-icon alert__close">
<i data-lucide="x"></i>
</button>
</div>
</div>