- Elements
- Alerts
Default Alerts
Code
Primary!Lorem Ipsum is simply dummy text of the printing.
Secondary!Lorem Ipsum is simply dummy text of the printing.
Success!Lorem Ipsum is simply dummy text of the printing.
Warning!Lorem Ipsum is simply dummy text of the printing.
Danger!Lorem Ipsum is simply dummy text of the printing.
Info!Lorem Ipsum is simply dummy text of the printing.
<!-- primary -->
<div class="flex items-center p-3.5 rounded text-primary bg-primary-light dark:bg-primary-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Primary!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- secondary -->
<div class="flex items-center p-3.5 rounded text-secondary bg-secondary-light dark:bg-secondary-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Secondary!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- success -->
<div class="flex items-center p-3.5 rounded text-success bg-success-light dark:bg-success-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Success!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- warning -->
<div class="flex items-center p-3.5 rounded text-warning bg-warning-light dark:bg-warning-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- danger -->
<div class="flex items-center p-3.5 rounded text-danger bg-danger-light dark:bg-danger-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Danger!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- info -->
<div class="flex items-center p-3.5 rounded text-info bg-info-light dark:bg-info-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Info!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
Outline Alerts
Code
Primary!Lorem Ipsum is simply dummy text of the printing.
Danger!Lorem Ipsum is simply dummy text of the printing.
<!-- primary -->
<div class="flex items-center p-3.5 rounded text-white-dark border border-primary">
<span class="ltr:pr-2 rtl:pl-2">
<strong class="ltr:mr-2 rtl:ml-2">Primary!</strong>Lorem Ipsum is simply dummy text of the printing.
</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- danger -->
<div class="flex items-center border p-3.5 rounded text-white-dark border-danger">
<span class="ltr:pr-2 rtl:pl-2">
<strong class="ltr:mr-2 rtl:ml-2">Danger!</strong>Lorem Ipsum is simply dummy text of the printing.
</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
Solid Alerts
Code
Warning!Lorem Ipsum is simply dummy text of the printing.
Info!Lorem Ipsum is simply dummy text of the printing.
<!-- primary -->
<div class="flex items-center p-3.5 rounded text-white bg-primary">
<span class="ltr:pr-2 rtl:pl-2">
<strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.
</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- warning -->
<div class="flex items-center p-3.5 rounded text-white bg-warning">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Info!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
Alerts with icon
Code
Warning!Lorem Ipsum is simply dummy text of the printing.
Warning!Lorem Ipsum is simply dummy text of the printing.
<!-- success -->
<div class="relative flex items-center border p-3.5 rounded text-success bg-success-light border-success ltr:border-l-[64px] rtl:border-r-[64px] dark:bg-success-dark-light">
<span class="absolute ltr:-left-11 rtl:-right-11 inset-y-0 text-white w-6 h-6 m-auto">
<svg> ... </svg>
</span>
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- dark -->
<div class="relative flex items-center border p-3.5 rounded text-dark bg-dark-light border-dark ltr:border-r-[64px] rtl:border-l-[64px] dark:bg-dark-dark-light dark:text-white-light dark:border-white-light/20">
<span class="absolute ltr:-right-11 rtl:-left-11 inset-y-0 text-white w-6 h-6 m-auto">
<svg> ... </svg>
</span>
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
Arrowed Alerts
Code
Warning!Lorem Ipsum is simply dummy text of the printing.
Warning!Lorem Ipsum is simply dummy text of the printing.
<!-- primary -->
<div class="relative flex items-center border p-3.5 rounded before:absolute before:top-1/2 ltr:before:left-0 rtl:before:right-0 rtl:before:rotate-180 before:-mt-2 before:border-l-8 before:border-t-8 before:border-b-8 before:border-t-transparent before:border-b-transparent before:border-l-inherit text-primary bg-primary-light !border-primary ltr:border-l-[64px] rtl:border-r-[64px] dark:bg-primary-dark-light">
<span class="absolute ltr:-left-11 rtl:-right-11 inset-y-0 text-white w-6 h-6 m-auto">
<svg> ... </svg>
</span>
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- danger -->
<div class="relative flex items-center border p-3.5 rounded before:inline-block before:absolute before:top-1/2 ltr:before:right-0 rtl:before:left-0 rtl:before:rotate-180 before:-mt-2 before:border-r-8 before:border-t-8 before:border-b-8 before:border-t-transparent before:border-b-transparent before:border-r-inherit text-danger bg-danger-light border-danger ltr:border-r-[64px] rtl:border-l-[64px] dark:bg-danger-dark-light">
<span class="absolute ltr:-right-11 rtl:-left-11 inset-y-0 text-white w-6 h-6 m-auto">
<svg> ... </svg>
</span>
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
Custom Alerts
Code
Warning!Lorem Ipsum is simply dummy text of the printing.
Warning!Lorem Ipsum is simply dummy text of the printing.
<!-- info -->
<div class="flex items-center p-3.5 rounded text-white bg-info">
<span class="text-white w-6 h-6 ltr:mr-4 rtl:ml-4">
<svg> ... </svg>
</span>
<span><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="btn btn-sm bg-white text-black ltr:ml-auto rtl:mr-auto">Accept</button>
<button type="button" class="ltr:ml-4 rtl:mr-4">
<svg> ... </svg>
</button>
</div>
<!-- gradient -->
<div class="flex items-center p-3.5 rounded text-white" style="background: rgb(188,26,78);background: linear-gradient(135deg, rgba(188,26,78,1) 0%, rgba(0,79,230,1) 100%);">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- image -->
<div class="flex items-center p-3.5 rounded text-white bg-[url('../images/menu-heade.jpg')] bg-no-repeat bg-center bg-cover">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
© . Vristo All rights reserved.