A status indicator card built with pure HTML and CSS that visually represents different states using color, icons, or labels, helping users quickly understand status without relying on JavaScript or external libraries.
Usage
This component is ideal for interfaces where clear state communication is important, such as dashboards, system monitors, task boards, notifications, or any UI that displays active, inactive, success, or error states.
Implementation
The status indicators are implemented using CSS color styling, badges, and layout control, allowing different states to be displayed clearly while keeping the card lightweight and easy to customize.
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Status Pulse</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="card-status">
<span class="card-status__dot"></span>
<span>Online</span>
</div>
</body>
</html>CSS
@keyframes status-pulse {
0% {
transform: scale(1);
opacity: 0.6;
}
70% {
transform: scale(2.5);
opacity: 0;
}
100% {
transform: scale(2.5);
opacity: 0;
}
}
.card-status {
width: 200px;
padding: 0.75rem 1rem;
border-radius: 16px;
background: #ffffff;
color: #111827;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 13px;
font-family: system-ui, sans-serif;
}
.card-status__dot {
position: relative;
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
}
.card-status__dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(34, 197, 94, 0.6);
animation: status-pulse 2s infinite;
}
@media (prefers-color-scheme: dark) {
.card-status {
background: #020617;
color: #e5e7eb;
}
.card-status__dot {
background: #4ade80;
}
.card-status__dot::after {
background: rgba(74, 222, 128, 0.6);
}
}
@media (prefers-reduced-motion: reduce) {
.card-status__dot::after {
animation: none;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Displays clear visual status indicators
- Supports multiple state styles (success, warning, error, info)
- Lightweight and easy to theme
- Works in modern browsers
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.