mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 13:18:22 +00:00
78 lines
3.1 KiB
Plaintext
78 lines
3.1 KiB
Plaintext
<section id="alert" class="w-full rounded-lg border scroll-mt-16">
|
|
<header class="border-b px-4 py-3">
|
|
<h2 class="text-sm font-medium">Alert</h2>
|
|
</header>
|
|
<div class="p-4">
|
|
<div class="grid max-w-xl items-start gap-4">
|
|
<div class="alert">
|
|
{% lucide "circle-check" %}
|
|
<h2>Success! Your changes have been saved</h2>
|
|
<section>This is an alert with icon, title and description.</section>
|
|
</div>
|
|
|
|
<div class="alert">
|
|
{% lucide "bookmark-check" %}
|
|
<section>This is an alert with icon, title and description.</section>
|
|
</div>
|
|
|
|
<div class="alert">
|
|
<section>This one has a description only. No title. No icon.</section>
|
|
</div>
|
|
|
|
<div class="alert">
|
|
{% lucide "popcorn" %}
|
|
<h2>Let's try one with icon and title.</h2>
|
|
</div>
|
|
|
|
<div class="alert">
|
|
{% lucide "shield-alert" %}
|
|
<h2>This is a very long alert title that demonstrates how the component handles extended text content and potentially wraps across multiple lines</h2>
|
|
</div>
|
|
|
|
<div class="alert">
|
|
{% lucide "gift" %}
|
|
<section>This is a very long alert description that demonstrates how the component handles extended text content and potentially wraps across multiple lines</section>
|
|
</div>
|
|
|
|
<div class="alert">
|
|
{% lucide "circle-alert" %}
|
|
<h2>This is an extremely long alert title that spans multiple lines to demonstrate how the component handles very lengthy headings while maintaining readability and proper text wrapping behavior</h2>
|
|
<section>This is an equally long description that contains detailed information about the alert. It shows how the component can accommodate extensive content while preserving proper spacing, alignment, and readability across different screen sizes and viewport widths. This helps ensure the user experience remains consistent regardless of the content length.</section>
|
|
</div>
|
|
|
|
<div class="alert-destructive">
|
|
{% lucide "circle-alert" %}
|
|
<h2>Something went wrong!</h2>
|
|
<section>Your session has expired. Please log in again.</section>
|
|
</div>
|
|
|
|
<div class="alert-destructive">
|
|
{% lucide "circle-alert" %}
|
|
<h2>Something went wrong!</h2>
|
|
<section>
|
|
<p>Please verify your billing information and try again.</p>
|
|
<ul>
|
|
<li>Check your card details</li>
|
|
<li>Ensure sufficient funds</li>
|
|
<li>Verify billing address</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
|
|
{# <div class="alert">
|
|
{% lucide "circle-check" %}
|
|
<h2>Something went wrong!</h2>
|
|
<section>Your session has expired. Please log in again.</section>
|
|
<button type="button" class="btn-sm-outline">
|
|
Undo
|
|
</button>
|
|
</div> #}
|
|
|
|
<div class="alert border-amber-50 bg-amber-50 text-amber-900 dark:border-amber-950 dark:bg-amber-950 dark:text-amber-100">
|
|
{% lucide "circle-check" %}
|
|
<h2>Plot Twist: This Alert is Actually Amber!</h2>
|
|
<section>This one has custom colors for light and dark mode.</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section> |