Photo by Roi Solomon on Unsplash
Alerts Card Design Using HTML and CSS
Create a modern, responsive alerts card component using HTML and CSS, featuring notification boxes with danger, success, info, and warning variants. This implementation focuses on clean design, accessibility, and maintainable code structure, suitable for user notifications or system feedback. JavaScript can be added for interactivity (e.g., dismissing alerts).
This action cannot be undone. Proceed with caution.
Your changes have been saved successfully.
New features will be available in the next update.
Your subscription will expire in 3 days.
Prerequisites
- Basic HTML and CSS knowledge
- A code editor (e.g., VS Code)
- Font Awesome CDN for icons (link)
Part 1: Alerts Card Design
Step 1: HTML Structure (index.html)
Create a semantic HTML structure for the alerts card with containers for danger, success, info, and warning variants, each with an icon and content.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="notification danger" role="alert" aria-live="polite">
<div class="notification-icon">
<i class="fas fa-exclamation-circle"></i>
</div>
<div class="notification-content">
<strong>Danger!</strong>
<p>This action cannot be undone. Proceed with caution.</p>
</div>
</div>
<div class="notification success" role="alert" aria-live="polite">
<div class="notification-icon">
<i class="fas fa-check-circle"></i>
</div>
<div class="notification-content">
<strong>Success!</strong>
<p>Your changes have been saved successfully.</p>
</div>
</div>
<div class="notification info" role="alert" aria-live="polite">
<div class="notification-icon">
<i class="fas fa-info-circle"></i>
</div>
<div class="notification-content">
<strong>Info!</strong>
<p>New features will be available in the next update.</p>
</div>
</div>
<div class="notification warning" role="alert" aria-live="polite">
<div class="notification-icon">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="notification-content">
<strong>Warning!</strong>
<p>Your subscription will expire in 3 days.</p>
</div>
</div>
Step 2: Core CSS Implementation (styles.css)
Style the alerts card with distinct variants, hover effects, and responsive design.
:root {
--danger: #f44336;
--success: #04AA6D;
--info: #2196F3;
--warning: #ffeb3b;
--danger-light: #ffdddd;
--success-light: #ddffdd;
--info-light: #e7f3fe;
--warning-light: #ffffcc;
--gray-900: #333;
--gray-700: #555;
--gray-200: #e5e7eb;
--gray-100: #f9f9f9;
--radius: 8px;
--shadow: 0 2px 8px rgba(0,0,0,0.1);
--transition: all 0.3s ease;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--shadow-md: 0 4px 12px rgba(0,0,0,0.15);
--font-sans: 'Segoe UI', Roboto, sans-serif;
}
.notification {
margin: var(--spacing-lg) 0px;
padding: var(--spacing-lg) 20px;
border-radius: var(--radius);
box-shadow: var(--shadow);
display: flex;
align-items: center;
transition: var(--transition);
max-width: 600px;
width: 100%;
}
.notification:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.notification-icon {
margin-right: var(--spacing-md);
font-size: 24px;
}
.notification-content {
flex: 1;
display: flex;
align-items: center;
}
.notification-content p {
margin-left: var(--spacing-sm);
margin: 0;
}
.notification strong {
display: block;
margin-right: var(--spacing-sm);
}
.danger {
background-color: var(--danger-light);
border-left: 4px solid var(--danger);
}
.success {
background-color: var(--success-light);
border-left: 4px solid var(--success);
}
.info {
background-color: var(--info-light);
border-left: 4px solid var(--info);
}
.warning {
background-color: var(--warning-light);
border-left: 4px solid var(--warning);
}
.danger .notification-icon {
color: var(--danger);
}
.success .notification-icon {
color: var(--success);
}
.info .notification-icon {
color: var(--info);
}
.warning .notification-icon {
color: var(--warning);
}
@media (max-width: 640px) {
.notification {
padding: var(--spacing-sm);
}
.notification-icon {
font-size: 20px;
}
.notification-content {
font-size: 14px;
}
.notification-content p {
font-size: 15px;
}
.notification strong {
font-size: 1em;
}
}
Explanation
- Layout: Each alert is a flexbox container with an icon and content (title and message), styled with a light background, shadow, and rounded corners.
- Variants: Danger, success, info, and warning alerts use distinct colors (
--danger,--success,--info,--warning) for border-left and icon, ensuring clear differentiation. - Visual Feedback: Hovering an alert lifts it slightly (
translateY(-2px)) with a stronger shadow, enhancing interactivity. - Responsiveness: A media query (
@media (max-width: 640px)) reduces padding, icon size, and font sizes for mobile usability. - Accessibility:
role="alert"andaria-live="polite"ensure screen readers announce alerts when displayed. Icons use Font Awesome for consistent, recognizable symbols.
Accessibility Features
- Use
role="alert"andaria-live="polite"for semantic structure - Ensure high contrast ratios for text, icons, and borders (4.5:1 minimum)
- Use recognizable icons (via Font Awesome) to reinforce alert type
Golden Rules
- Use CSS variables for consistent theming
- Implement hover effects for visual feedback
- Ensure accessibility with ARIA attributes
- Optimize for mobile with responsive design
Conclusion
A professional alerts card should maintain visual clarity, provide intuitive styling, remain responsive, and follow accessibility guidelines. This solution uses HTML and CSS to create polished notification boxes with danger, success, info, and warning variants, enhanced by Font Awesome icons. Experiment with colors, icons, or add JavaScript for interactivity like dismissing or dynamic alerts. Test across devices and browsers for usability. Feel free to leave comments with any questions or suggestions!
Comments
Post a Comment