<!--
@type: Alert
@industry: Business
@style: Modern
@category: UI Element
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-slate-50: #f8fafc;
--color-slate-200: #e2e8f0;
--color-slate-300: #cbd5e1;
--color-slate-600: #475569;
--color-slate-900: #0f172a;
--color-indigo-100: #e0e7ff;
--color-indigo-200: #c7d2fe;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--color-white: #ffffff;
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--ring-offset: 2px;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component styles */
.alert {
width: 100%;
max-width: 36rem; /* xl = 36rem */
margin: 2rem auto;
padding: 1.5rem;
background-color: var(--color-slate-50);
border-radius: 0.75rem;
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-slate-200);
color: var(--color-slate-900);
}
.alert-container {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.alert-icon-wrapper {
flex-shrink: 0;
margin-top: 0.25rem;
}
.alert-icon {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background-color: var(--color-indigo-100);
color: var(--color-indigo-600);
font-size: 1.5rem;
font-weight: 700;
user-select: none;
}
.alert-content {
flex: 1;
min-width: 0;
}
.alert-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-slate-900);
margin-bottom: 0.25rem;
}
.alert-description {
font-size: 1rem;
color: var(--color-slate-600);
margin-bottom: 0.75rem;
}
.alert-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s;
}
.btn:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-indigo-200);
box-shadow: 0 0 0 2px var(--color-indigo-200), 0 0 0 calc(2px + var(--ring-offset)) var(--color-white);
}
.btn-primary {
background-color: var(--color-indigo-600);
color: var(--color-white);
border: none;
}
.btn-primary:hover {
background-color: var(--color-indigo-700);
}
.btn-secondary {
background-color: var(--color-white);
color: var(--color-slate-900);
border: 1px solid var(--color-slate-300);
}
.btn-secondary:hover {
border-color: var(--color-indigo-600);
color: var(--color-indigo-600);
}
/* Responsive */
@media (min-width: 640px) {
.alert-actions {
flex-direction: row;
}
}
</style>
<section class="alert" aria-label="Business Alert">
<div class="alert-container">
<div class="alert-icon-wrapper">
<span class="alert-icon" aria-label="Figyelem!">!</span>
</div>
<div class="alert-content">
<h2 class="alert-title" id="alert-title">Important Business Update</h2>
<p class="alert-description" id="alert-desc">Our new compliance policy will take effect on July 1st. Please review the updated documentation to ensure your team is prepared for the changes. For any questions, contact your account manager.</p>
<div class="alert-actions">
<a href="#" class="btn btn-primary" aria-label="Read compliance policy">Read Policy</a>
<button type="button" class="btn btn-secondary" aria-label="Dismiss alert" onclick="this.closest('section').style.display='none'">Dismiss</button>
</div>
</div>
</div>
</section>
<!--
@type: Alert
@industry: Business
@style: Modern
@category: UI Element
@framework: Tailwind
@license: Free
-->
<section class="w-full max-w-xl mx-auto my-8 p-6 bg-slate-50 rounded-xl shadow-lg border border-slate-200 font-inter text-slate-900" aria-label="Business Alert">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 mt-1">
<!-- Alert icon -->
<span class="w-8 h-8 flex items-center justify-center rounded-full bg-indigo-100 text-indigo-600 text-2xl font-bold select-none" aria-label="Figyelem!">!</span>
</div>
<div class="flex-1 min-w-0">
<h2 class="text-lg font-semibold text-slate-900 mb-1" id="alert-title">Important Business Update</h2>
<p class="text-base text-slate-600 mb-3" id="alert-desc">Our new compliance policy will take effect on July 1st. Please review the updated documentation to ensure your team is prepared for the changes. For any questions, contact your account manager.</p>
<div class="flex flex-col sm:flex-row gap-3">
<a href="#" class="inline-block bg-indigo-600 text-white px-6 py-3 rounded-lg text-base font-medium hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2" aria-label="Read compliance policy">Read Policy</a>
<button type="button" class="inline-block border border-slate-300 text-slate-900 bg-white px-6 py-3 rounded-lg text-base font-medium hover:border-indigo-600 hover:text-indigo-600 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2" aria-label="Dismiss alert" onclick="this.closest('section').style.display='none'">Dismiss</button>
</div>
</div>
</div>
</section>
