Alerts Card Design Using HTML, CSS, and JavaScript

on
Alerts Card Design Using HTML, CSS, and JavaScript

Alerts Card Design Using HTML, CSS, and JavaScript

Create a modern, responsive alerts card component using HTML, CSS, and JavaScript, featuring dismissible alerts with success, warning, and error variants. This implementation focuses on clean design, accessible interactions, and maintainable code structure, suitable for notifications or user feedback.

Prerequisites

  • Basic HTML, CSS, and JavaScript knowledge
  • A code editor (e.g., VS Code)

Part 1: Alerts Card Design

Step 1: HTML Structure (index.html)

Create a semantic HTML structure for the alerts card with containers for success, warning, and error variants, each with an icon, content, and close button.

<div class="alert-container success" role="alert" aria-live="polite" id="successAlert">
    <span class="alert-icon">✔</span>
    <div class="alert-content">Success! Your action was completed successfully.</div>
    <button class="alert-close" aria-label="Close success alert">×</button>
</div>
<div class="alert-container warning" role="alert" aria-live="polite" id="warningAlert">
    <span class="alert-icon">⚠</span>
    <div class="alert-content">Warning: Please review your input before proceeding.</div>
    <button class="alert-close" aria-label="Close warning alert">×</button>
</div>
<div class="alert-container error" role="alert" aria-live="polite" id="errorAlert">
    <span class="alert-icon">✖</span>
    <div class="alert-content">Error: Something went wrong. Please try again.</div>
    <button class="alert-close" aria-label="Close error alert">×</button>
</div>

Step 2: Core CSS Implementation (styles.css)

Style the alerts card with distinct variants, smooth transitions, and responsive design.

:root {
    --gray-900: #111827;
    --gray-700: #374151;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --white: #ffffff;
    --primary-600: #2563eb;
    --primary-500: #3b82f6;
    --success-500: #10b981;
    --warning-500: #f59e0b;
    --error-500: #ef4444;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --transition: 0.2s ease;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.alert-container {
    max-width: 500px;
    width: 100%;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--space-md);
    transition: opacity var(--transition), transform var(--transition);
}

.alert-container.success {
    border-left: 4px solid var(--success-500);
}

.alert-container.warning {
    border-left: 4px solid var(--warning-500);
}

.alert-container.error {
    border-left: 4px solid var(--error-500);
}

.alert-container.hidden {
    opacity: 0;
    transform: translateY(10px);
    display: none;
}

.alert-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.alert-container.success .alert-icon {
    color: var(--success-500);
}

.alert-container.warning .alert-icon {
    color: var(--warning-500);
}

.alert-container.error .alert-icon {
    color: var(--error-500);
}

.alert-content {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--gray-900);
}

.alert-close {
    background: none;
    border: none;
    color: var(--gray-700);
    font-size: 1rem;
    cursor: pointer;
    padding: var(--spacing-xs);
    transition: color var(--transition);
}

.alert-close:hover {
    color: var(--gray-900);
}

.alert-close:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

@media (max-width: 640px) {
    .alert-container {
        width: 95%;
        padding: var(--spacing-sm);
    }

    .alert-content {
        font-size: 0.875rem;
    }

    .alert-icon {
        font-size: 1rem;
    }

    .alert-close {
        font-size: 0.875rem;
    }
}

Step 3: JavaScript Implementation (script.js)

Add JavaScript to handle dismissing alerts via close button or Escape key.

document.addEventListener('DOMContentLoaded', () => {
    const closeButtons = document.querySelectorAll('.alert-close');

    closeButtons.forEach(button => {
        button.addEventListener('click', () => {
            const alert = button.closest('.alert-container');
            alert.classList.add('hidden');
        });
    });

    // Close on Escape key
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            const alerts = document.querySelectorAll('.alert-container:not(.hidden)');
            alerts.forEach(alert => {
                alert.classList.add('hidden');
            });
        }
    });
});

Explanation

  • Layout: Each alert is a flexbox container with an icon, content, and close button, styled with a white background, shadow, and rounded corners.
  • Variants: Success, warning, and error alerts use distinct colors (--success-500, --warning-500, --error-500) for border-left and icon, ensuring clear differentiation.
  • Interactivity: JavaScript adds a hidden class to dismiss alerts, with a fade-out and slide animation. The Escape key dismisses all visible alerts.
  • Visual Feedback: Close buttons darken on hover (--gray-900); focus states use a blue ring. Colored borders and icons indicate alert type.
  • Responsiveness: A media query (@media (max-width: 640px)) reduces width, padding, and font sizes for mobile usability.
  • Accessibility: role="alert" and aria-live="polite" ensure screen readers announce alerts. aria-label on close buttons describes their purpose. Keyboard support includes Escape key and focus management.
UX Tip: Ensure alerts are visually distinct with clear icons and colors. Use ARIA attributes and test keyboard navigation (including Escape key) for accessibility. Consider adding auto-dismiss timers or dynamic alert generation in production.

Accessibility Features

  • Use role="alert" and aria-live="polite" for semantic structure
  • Ensure high contrast ratios for text, icons, and borders (4.5:1 minimum)
  • Support keyboard navigation with focus states and Escape key
  • Provide descriptive aria-label for close buttons

Golden Rules

  • Use CSS variables for consistent theming
  • Implement focus states and ARIA for accessibility
  • Provide clear visual feedback for alert types and interactions
  • Optimize for mobile with responsive design

Conclusion

A professional alerts card should maintain visual clarity, provide intuitive interactions, remain responsive, and follow accessibility guidelines. This solution uses HTML, CSS, and JavaScript for polished, dismissible alerts with success, warning, and error variants. Experiment with colors, icons, or add features like auto-dismiss or dynamic alerts. Test across devices and browsers for usability. Feel free to leave comments with any questions or suggestions!

Comments

Post a Comment