Photo by Safar Safarov on Unsplash
Alert Card Neo Brutalism Design Using HTML, CSS, and JavaScript
Create a modern, responsive alert card design in the neo-brutalist style using HTML, CSS, and JavaScript, featuring bold colors, thick borders, and heavy shadows for a raw, unpolished aesthetic. This implementation focuses on striking visuals, accessible interactions, and maintainable code, ideal for notifications or messages in web interfaces.
Primary Alert
This is a neo-brutalist alert card. Click the close button to dismiss it.
Secondary Alert
This alert uses an accent color for variety, maintaining the bold style.
Prerequisites
- Basic HTML, CSS, and JavaScript knowledge
- A code editor (e.g., VS Code)
Part 1: Alert Card Neo Brutalism Design
Step 1: HTML Structure (index.html)
Create a semantic HTML structure for the neo-brutalist alert cards with a container, title, content, and close button.
<div class="alert-container" role="alert" aria-live="polite">
<div class="alert-card" id="alert-primary">
<h2 class="alert-title">Primary Alert</h2>
<p class="alert-content">This is a neo-brutalist alert card. Click the close button to dismiss it.</p>
<button class="alert-close" aria-label="Close primary alert">Close</button>
</div>
<div class="alert-card secondary" id="alert-secondary">
<h2 class="alert-title">Secondary Alert</h2>
<p class="alert-content">This alert uses an accent color for variety, maintaining the bold style.</p>
<button class="alert-close" aria-label="Close secondary alert">Close</button>
</div>
</div>
Step 2: Core CSS Implementation (styles.css)
Style the alert cards and their elements with neo-brutalist aesthetics: bold colors, thick borders, heavy shadows, and a monospace font. Include Google Fonts for consistent typography.
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=IBM+Plex+Mono:wght@600&display=swap" rel="stylesheet">
:root {
--gray-900: #111827;
--gray-700: #374151;
--gray-200: #e5e7eb;
--gray-100: #f3f4f6;
--white: #ffffff;
--primary-600: #2563eb;
--primary-500: #3b82f6;
--accent-500: #f59e0b;
--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);
--shadow-neo: 4px 4px 0 var(--gray-900);
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'IBM Plex Mono', monospace;
}
.alert-container {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
width: 100%;
max-width: 400px;
}
.alert-card {
background: var(--white);
border: 4px solid var(--gray-900);
border-radius: var(--radius-md);
box-shadow: var(--shadow-neo);
padding: var(--spacing-lg);
position: relative;
transition: transform var(--transition), opacity var(--transition);
}
.alert-card.hidden {
transform: translateY(20px);
opacity: 0;
pointer-events: none;
}
.alert-card.secondary {
border-color: var(--accent-500);
}
.alert-title {
font-family: var(--font-mono);
font-size: 1.125rem;
font-weight: 600;
text-transform: uppercase;
color: var(--gray-900);
margin-bottom: var(--spacing-sm);
}
.alert-content {
font-family: var(--font-sans);
font-size: 0.9375rem;
color: var(--gray-700);
margin-bottom: var(--spacing-md);
}
.alert-close {
position: absolute;
top: var(--spacing-sm);
right: var(--spacing-sm);
background: var(--primary-500);
border: 3px solid var(--gray-900);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-neo);
font-family: var(--font-mono);
font-size: 0.875rem;
font-weight: 600;
color: var(--gray-900);
padding: var(--spacing-xs) var(--spacing-sm);
cursor: pointer;
transition: transform var(--transition), box-shadow var(--transition);
}
.alert-card.secondary .alert-close {
background: var(--accent-500);
}
.alert-close:hover {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 var(--gray-900);
}
.alert-close:focus {
outline: none;
box-shadow: 2px 2px 0 var(--accent-500), 0 0 0 3px var(--primary-600);
}
.alert-card.secondary .alert-close:focus {
box-shadow: 2px 2px 0 var(--primary-500), 0 0 0 3px var(--accent-500);
}
@media (max-width: 640px) {
.alert-container {
gap: var(--spacing-sm);
}
.alert-card {
padding: var(--spacing-md);
}
.alert-title {
font-size: 1rem;
}
.alert-content {
font-size: 0.875rem;
}
.alert-close {
font-size: 0.75rem;
padding: var(--spacing-xs);
}
}
Step 3: JavaScript Implementation (script.js)
Add JavaScript to manage alert card dismissal with click or keyboard interactions, logging actions for demo purposes.
document.addEventListener('DOMContentLoaded', () => {
const closeButtons = document.querySelectorAll('.alert-close');
closeButtons.forEach(button => {
const alertCard = button.closest('.alert-card');
// Dismiss alert
function dismissAlert() {
alertCard.classList.add('hidden');
console.log(`${alertCard.id} dismissed`);
}
// Click to dismiss
button.addEventListener('click', dismissAlert);
// Keyboard support
button.addEventListener('keydown', (e) => {
if (e.code === 'Enter' || e.code === 'Space') {
e.preventDefault();
dismissAlert();
}
});
});
});
Explanation
- Layout: Alert cards are housed in a flexbox container (`.alert-container`) with a maximum width, stacking vertically. Each card (`.alert-card`) includes a title, content, and close button, styled with a white background, thick borders, and heavy shadows.
- Styling: Cards use a white background with thick black (
4px) or orange (--accent-500for secondary) borders, offset shadows (--shadow-neo), and a monospace font for titles. Close buttons use blue (--primary-500) or orange backgrounds with matching borders and shadows, positioned in the top-right corner. - Interactivity: JavaScript handles dismissing alerts via the close button or Enter/Space keys, adding a `.hidden` class to animate the card out. It logs dismissals for demo purposes.
- Visual Feedback: Dismissing an alert slides it down and fades it out (
transform: translateY(20px),opacity: 0). The close button shifts on hover/focus (translate(2px, 2px)) with a reduced shadow; focus adds a dual shadow (accent and primary). - Responsiveness: A media query (
@media (max-width: 640px)) reduces container gap, card padding, and font sizes for mobile usability, maintaining the neo-brutalist aesthetic. - Accessibility:
role="alert"andaria-live="polite"on the container ensure screen reader compatibility. Close buttons havearia-labelfor clarity. Keyboard support (Enter, Space) and high contrast ratios (4.5:1 minimum) enhance usability. The monospace title font is bold and readable.
UX Tip: Neo-brutalist alert cards should feel bold and tactile with heavy shadows and stark contrasts. Ensure accessibility with ARIA attributes, keyboard support, and clear visual cues. In production, add dynamic alerts, timers, or multiple types (e.g., success, error) and test across devices.
Accessibility Features
- Use
role="alert"andaria-live="polite"for semantic structure - Include
aria-labelon close buttons for screen readers - Support keyboard interactions with Enter and Space keys
- Ensure high contrast ratios for text, borders, and backgrounds (4.5:1 minimum)
- Use bold, readable typography (monospace for titles)
Golden Rules
- Use CSS variables for consistent theming
- Implement bold borders and heavy shadows for neo-brutalist style
- Ensure accessibility with ARIA and keyboard support
- Optimize for mobile with responsive design
Conclusion
A professional neo-brutalist alert card should embrace raw, bold aesthetics, provide clear user feedback, remain responsive, and follow accessibility guidelines. This solution uses HTML, CSS, and JavaScript for striking alert cards with primary and secondary variants, featuring heavy shadows, thick borders, and a monospace font. Experiment with colors, shadow offsets, or add features like timers or dynamic alert types. Test across devices and browsers for usability. Feel free to leave comments with any questions or suggestions!
Comments
Post a Comment