Cards

◆CSS◆HTML◆UI◆Intermediate

Card Components

Cards are versatile containers for grouping related content. These examples cover basic cards, product cards, interactive hover cards, and card grids — all built with clean HTML and modern CSS.

Basic Card

A simple card with image area, title, description, badge, and action button. Uses subtle borders and a hover elevation effect.

basic-card

Live

untitled.html

HTML

1	<div class="card">
2	<div class="card-img">
3	🌄
4	</div>
5	<div class="card-body">
6	<span class="card-badge">
7	Featured
8	</span>
9	<h3 class="card-title">
10	Card Title
11	</h3>
12	<p class="card-desc">
13	A well-designed card groups related content and actions, making information scannable and actionable.
14	</p>
15	<button class="card-btn">
16	Learn More →
17	</button>
18	</div>
19	</div>

preview

Card Grid

Cards arranged in a responsive grid using CSS Grid. The grid adapts from 1 column on mobile to 3 columns on desktop using auto-fill and minmax.

card-grid

Live

untitled.html

HTML

1	<div class="grid">
2	<div class="card">
3	<span class="card-icon">
4	⚡
5	</span>
6	<h3 class="card-title">
7	Fast
8	</h3>
9	<p class="card-desc">
10	Optimized for speed with minimal overhead.
11	</p>
12	</div>
13	<div class="card">
14	<span class="card-icon">
15	🔒
16	</span>
17	<h3 class="card-title">
18	Secure
19	</h3>
20	<p class="card-desc">
21	Built-in security best practices.
22	</p>
23	</div>
24	<div class="card">
25	<span class="card-icon">
26	🎨
27	</span>
28	<h3 class="card-title">
29	Customizable
30	</h3>
31	<p class="card-desc">
32	Fully themeable with CSS variables.
33	</p>
34	</div>
35	<div class="card">
36	<span class="card-icon">
37	📱
38	</span>
39	<h3 class="card-title">
40	Responsive
41	</h3>
42	<p class="card-desc">
43	Works on every screen size.
44	</p>
45	</div>
46	<div class="card">
47	<span class="card-icon">
48	♿
49	</span>
50	<h3 class="card-title">
51	Accessible
52	</h3>
53	<p class="card-desc">
54	WCAG 2.1 compliant by default.
55	</p>
56	</div>
57	<div class="card">
58	<span class="card-icon">
59	🌍
60	</span>
61	<h3 class="card-title">
62	Global
63	</h3>
64	<p class="card-desc">
65	i18n ready with RTL support.
66	</p>
67	</div>
68	</div>

preview

Interactive Hover Card

A product-style card with image overlay, gradient, and a hover-reveal action button. Uses CSS transforms and transitions for the reveal effect.

interactive-card

Live

untitled.html

HTML

1	<div class="card">
2	<div class="card-img-wrap">
3	<div class="card-img">
4	🚀
5	</div>
6	<div class="card-overlay">
7	</div>
8	<button class="card-action">
9	View Project
10	</button>
11	</div>
12	<div class="card-body">
13	<h3 class="card-title">
14	Project Alpha
15	</h3>
16	<p class="card-sub">
17	Interactive hover reveal card
18	</p>
19	</div>
20	</div>

preview

X GitHub YouTube Instagram Facebook Buy me a coffee Sponsor

1	.card {
2
3	max-width: 320px;
4
5	width: 100%;
6
7	margin: 32px auto;
8
9	background: #111111;
10
11	border: 1px solid #222222;
12
13	border-radius: 12px;
14
15	overflow: hidden;
16
17	transition: all 0.3s ease;
18
19	}
20	.card:hover {
21
22	border-color: #333;
23
24	box-shadow: 0 8px 32px rgba(0,
25	0,
26	0,
27	0.4);
28
29	transform: translateY(-2px);
30
31	}
32	.card-img {
33
34	height: 160px;
35
36	display: flex;
37
38	align-items: center;
39
40	justify-content: center;
41
42	font-size: 40px;
43
44	background: linear-gradient(135deg, #1A1A2E, #2A1A3E);
45
46	color: #525252;
47
48	}
49	.card-body {
50
51	padding: 20px;
52
53	}
54	.card-badge {
55
56	display: inline-block;
57
58	padding: 3px 8px;
59
60	border-radius: 4px;
61
62	font-size: 10px;
63
64	font-weight: 600;
65
66	background: rgba(0,
67	255,
68	65,
69	0.1);
70
71	color: #00FF41;
72
73	margin-bottom: 10px;
74
75	}
76	.card-title {
77
78	font-size: 16px;
79
80	font-weight: 600;
81
82	color: #E0E0E0;
83
84	margin: 0 0 8px 0;
85
86	}
87	.card-desc {
88
89	font-size: 13px;
90
91	color: #808080;
92
93	margin: 0 0 16px 0;
94
95	line-height: 1.5;
96
97	}
98	.card-btn {
99
100	display: inline-flex;
101
102	align-items: center;
103
104	gap: 6px;
105
106	padding: 8px 16px;
107
108	border-radius: 6px;
109
110	font-size: 12px;
111
112	font-weight: 600;
113
114	cursor: pointer;
115
116	background: #00FF41;
117
118	color: #0A0A0A;
119
120	border: none;
121
122	transition: all 0.2s;
123
124	}
125	.card-btn:hover {
126
127	background: #00E63A;
128
129	}

1	.card {
2
3	max-width: 280px;
4
5	width: 100%;
6
7	margin: 32px auto;
8
9	border-radius: 12px;
10
11	overflow: hidden;
12
13	background: #111;
14
15	border: 1px solid #222;
16
17	cursor: pointer;
18
19	}
20	.card-img-wrap {
21
22	position: relative;
23
24	overflow: hidden;
25
26	}
27	.card-img {
28
29	height: 200px;
30
31	display: flex;
32
33	align-items: center;
34
35	justify-content: center;
36
37	font-size: 48px;
38
39	background: linear-gradient(135deg, #0F0F23, #2D1B69);
40
41	transition: transform 0.5s ease;
42
43	}
44	.card:hover .card-img {
45
46	transform: scale(1.05);
47
48	}
49	.card-overlay {
50
51	position: absolute;
52
53	inset: 0;
54
55	background: linear-gradient(to top, rgba(0,
56	0,
57	0,
58	0.8), transparent 50%);
59
60	opacity: 0;
61
62	transition: opacity 0.3s ease;
63
64	}
65	.card:hover .card-overlay {
66
67	opacity: 1;
68
69	}
70	.card-action {
71
72	position: absolute;
73
74	bottom: 16px;
75
76	left: 50%;
77
78	transform: translateX(-50%) translateY(10px);
79
80	padding: 8px 20px;
81
82	border-radius: 8px;
83
84	font-size: 12px;
85
86	font-weight: 600;
87
88	background: #00FF41;
89
90	color: #0A0A0A;
91
92	border: none;
93
94	cursor: pointer;
95
96	opacity: 0;
97
98	transition: all 0.3s ease;
99
100	white-space: nowrap;
101
102	}
103	.card:hover .card-action {
104
105	opacity: 1;
106
107	transform: translateX(-50%) translateY(0);
108
109	}
110	.card-body {
111
112	padding: 16px;
113
114	}
115	.card-title {
116
117	font-size: 15px;
118
119	font-weight: 600;
120
121	color: #E0E0E0;
122
123	margin: 0 0 4px 0;
124
125	}
126	.card-sub {
127
128	font-size: 11px;
129
130	color: #808080;
131
132	margin: 0;
133
134	}

1	.grid {
2
3	display: grid;
4
5	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
6
7	gap: 16px;
8
9	max-width: 700px;
10
11	margin: 24px auto;
12
13	padding: 0 24px;
14
15	}
16	.card {
17
18	background: #111111;
19
20	border: 1px solid #222222;
21
22	border-radius: 10px;
23
24	padding: 20px;
25
26	transition: all 0.3s ease;
27
28	}
29	.card:hover {
30
31	border-color: #333;
32
33	transform: translateY(-2px);
34
35	box-shadow: 0 8px 24px rgba(0,
36	0,
37	0,
38	0.3);
39
40	}
41	.card-icon {
42
43	font-size: 24px;
44
45	margin-bottom: 12px;
46
47	display: block;
48
49	}
50	.card-title {
51
52	font-size: 14px;
53
54	font-weight: 600;
55
56	color: #E0E0E0;
57
58	margin: 0 0 6px 0;
59
60	}
61	.card-desc {
62
63	font-size: 11px;
64
65	color: #808080;
66
67	margin: 0;
68
69	line-height: 1.5;
70
71	}