Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Component base — single class */ .alert { display: flex; gap: 0.75rem; padding: 1rem; border-radius: 0.5rem; background: var(--alert-bg, #d1ecf1); color: var(--alert-color, #0c5460); } /* Variants — single extra class */ .alert-danger { --alert-bg: #f8d7da; --alert-color: #721c24; } .alert-success { --alert-bg: #d4edda; --alert-color: #155724; }
Result
Open