<div class="mb-6 alert" role="alert">
<div class="flex justify-start items-start">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="24" height="24" class="flex-shrink-0 mt-1 mr-4 w-5 h-5">
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" />
</svg>
<div>
<h4 class="text-sm font-semibold">General Alert</h4>
<p class="leading-normal">Additional text for context goes here</p>
</div>
</div>
</div>
<div class="mb-6 alert alert-info" role="alert">
<div class="flex justify-start items-start">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="24" height="24" class="flex-shrink-0 mt-1 mr-4 w-5 h-5">
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" />
</svg>
<div>
<h4 class="text-sm font-semibold">Info Alert</h4>
<p class="leading-normal">Additional text for context goes here</p>
</div>
</div>
</div>
<div class="mb-6 alert alert-success" role="alert">
<div class="flex justify-start items-start">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="24" height="24" class="flex-shrink-0 mt-1 mr-4 w-5 h-5">
<path fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0112 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 013.498 1.307 4.491 4.491 0 011.307 3.497A4.49 4.49 0 0121.75 12a4.49 4.49 0 01-1.549 3.397 4.491 4.491 0 01-1.307 3.497 4.491 4.491 0 01-3.497 1.307A4.49 4.49 0 0112 21.75a4.49 4.49 0 01-3.397-1.549 4.49 4.49 0 01-3.498-1.306 4.491 4.491 0 01-1.307-3.498A4.49 4.49 0 012.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 011.307-3.497 4.49 4.49 0 013.497-1.307zm7.007 6.387a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
</svg>
<div>
<h4 class="text-sm font-semibold">Success Alert</h4>
<p class="leading-normal">Additional text for context goes here</p>
</div>
</div>
</div>
<div class="mb-6 alert alert-error" role="alert">
<div class="flex justify-start items-start">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="24" height="24" class="flex-shrink-0 mt-1 mr-4 w-5 h-5">
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75 0 10-1.06-1.06L12 10.94l-1.72-1.72z" clip-rule="evenodd" />
</svg>
<div>
<h4 class="text-sm font-semibold">Error/Danger Alert</h4>
<p class="leading-normal">Additional text for context goes here</p>
</div>
</div>
</div>
<div class="mb-6 alert alert-warning" role="alert">
<div class="flex justify-start items-start">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="24" height="24" class="flex-shrink-0 mt-1 mr-4 w-5 h-5">
<path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" />
</svg>
<div>
<h4 class="text-sm font-semibold">Warning Alert</h4>
<p class="leading-normal">Additional text for context goes here</p>
</div>
</div>
</div>def alerts(self, **kwargs):
template = Template(
"""
{% load heroicons %}
{% load svg %}
<div class="mb-6 alert" role="alert">
<div class="flex justify-start items-start">
{% heroicon_solid 'information-circle' class='flex-shrink-0 mt-1 mr-4 w-5 h-5' %}
<div>
<h4 class="text-sm font-semibold">General Alert</h4>
<p class="leading-normal">Additional text for context goes here</p>
</div>
</div>
</div>
<div class="mb-6 alert alert-info" role="alert">
<div class="flex justify-start items-start">
{% heroicon_solid 'information-circle' class='flex-shrink-0 mt-1 mr-4 w-5 h-5' %}
<div>
<h4 class="text-sm font-semibold">Info Alert</h4>
<p class="leading-normal">Additional text for context goes here</p>
</div>
</div>
</div>
<div class="mb-6 alert alert-success" role="alert">
<div class="flex justify-start items-start">
{% heroicon_solid 'check-badge' class='flex-shrink-0 mt-1 mr-4 w-5 h-5' %}
<div>
<h4 class="text-sm font-semibold">Success Alert</h4>
<p class="leading-normal">Additional text for context goes here</p>
</div>
</div>
</div>
<div class="mb-6 alert alert-error" role="alert">
<div class="flex justify-start items-start">
{% heroicon_solid 'x-circle' class='flex-shrink-0 mt-1 mr-4 w-5 h-5' %}
<div>
<h4 class="text-sm font-semibold">Error/Danger Alert</h4>
<p class="leading-normal">Additional text for context goes here</p>
</div>
</div>
</div>
<div class="mb-6 alert alert-warning" role="alert">
<div class="flex justify-start items-start">
{% heroicon_solid 'exclamation-triangle' class='flex-shrink-0 mt-1 mr-4 w-5 h-5' %}
<div>
<h4 class="text-sm font-semibold">Warning Alert</h4>
<p class="leading-normal">Additional text for context goes here</p>
</div>
</div>
</div>
""",
)
return template.render(Context({}))