Trong thế giới thiết kế web hiện đại, việc tổ chức nội dung một cách hiệu quả và thu hút người dùng là mục tiêu hàng đầu của các nhà thiết kế. Một trong những cách tiếp cận phổ biến và hiệu quả nhất để đạt được điều này là sử dụng thiết kế card. Thẻ (Card) đã trở thành một phần không thể thiếu của template HTML trong việc xây dựng giao diện người dùng, không chỉ trên các trang web thương mại điện tử mà còn trên các blog cá nhân. Trong bài viết này, chúng ta sẽ đi sâu vào 14 loại thiết kế card phổ biến nhất, giúp bạn không chỉ tạo ra giao diện đẹp mắt mà còn tối ưu hóa thiết kế web của mình với các HTML mẫu.
Tìm Hiểu Về 14 HTML CARD :
1. Product Card - Thẻ Sản Phẩm
Product Card là một yếu tố quan trọng trong các trang web thương mại điện tử, cho phép hiển thị nhanh chóng các thông tin sản phẩm như hình ảnh, giá cả, và nút "mua ngay". Thiết kế card này giúp người dùng dễ dàng xem qua các sản phẩm và đưa ra quyết định mua sắm mà không cần phải di chuyển quá nhiều trên trang web. Để tối ưu hóa cho thiết kế HTML, bạn có thể sử dụng template HTML sẵn có hoặc tùy chỉnh theo nhu cầu cụ thể của trang web.
Ví Dụ HTML Mẫu Product Card
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Card Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.product-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 300px;
text-align: center;
margin: 20px;
transition: transform 0.3s ease;
}
.product-card:hover {
transform: scale(1.05);
}
.product-image img {
width: 100%;
height: auto;
}
.product-info {
padding: 20px;
}
.product-title {
font-size: 18px;
margin: 10px 0;
color: #333;
}
.product-description {
font-size: 14px;
color: #777;
margin-bottom: 20px;
}
.product-price {
font-size: 20px;
color: #e67e22;
margin-bottom: 15px;
}
.buy-now-btn {
background-color: #e67e22;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.buy-now-btn:hover {
background-color: #d35400;
}
</style>
</head>
<body>
<div class="product-card">
<div class="product-image">
<img src="https://via.placeholder.com/300" alt="Product Image">
</div>
<div class="product-info">
<h3 class="product-title">Product Name</h3>
<p class="product-description">This is a brief description of the product. It highlights the main features and benefits.</p>
<div class="product-price">
$29.99
</div>
<button class="buy-now-btn">Buy Now</button>
</div>
</div>
</body>
</html>
2. Blog Card - Thẻ Bài Viết
Blog Card là một thành phần không thể thiếu trên các blog cá nhân, giúp sắp xếp và trình bày các bài viết theo cách trực quan. Sử dụng HTML mẫu cho blog card có thể giúp bạn dễ dàng tạo ra các bố cục gọn gàng và thu hút, đặc biệt khi kết hợp với thiết kế HTML hiện đại. Blog card thường bao gồm tiêu đề bài viết, hình ảnh đại diện, và đoạn trích ngắn gọn, giúp người đọc nhanh chóng nắm bắt nội dung chính.
Ví Dụ HTML Mẫu Blog Card
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Card Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.blog-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 350px;
text-align: left;
margin: 20px;
transition: transform 0.3s ease;
}
.blog-card:hover {
transform: scale(1.05);
}
.blog-image img {
width: 100%;
height: auto;
}
.blog-content {
padding: 20px;
}
.blog-title {
font-size: 20px;
margin: 10px 0;
color: #333;
}
.blog-description {
font-size: 14px;
color: #777;
margin-bottom: 15px;
}
.read-more-btn {
background-color: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s ease;
}
.read-more-btn:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="blog-card">
<div class="blog-image">
<img src="https://via.placeholder.com/350x200" alt="Blog Image">
</div>
<div class="blog-content">
<h3 class="blog-title">Blog Post Title</h3>
<p class="blog-description">This is a brief description of the blog post. It gives an overview of the content to entice readers to click through and read more.</p>
<a href="#" class="read-more-btn">Read More</a>
</div>
</div>
</body>
</html>
3. Review Card - Thẻ Đánh Giá
Review Card là một cách tuyệt vời để hiển thị đánh giá từ người dùng hoặc chuyên gia. Điều này không chỉ tăng cường sự tin cậy mà còn tạo ra một trải nghiệm người dùng tốt hơn. Với thiết kế web chuyên nghiệp, review card có thể tích hợp xếp hạng sao, bình luận ngắn, và hình ảnh đại diện, tất cả đều có thể được tùy chỉnh dễ dàng với template HTML phù hợp.
Ví Dụ HTML Mẫu Review Card :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Review Card Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.review-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 300px;
text-align: left;
margin: 20px;
transition: transform 0.3s ease;
}
.review-card:hover {
transform: scale(1.05);
}
.review-header {
display: flex;
align-items: center;
padding: 20px;
}
.review-avatar {
border-radius: 50%;
width: 50px;
height: 50px;
margin-right: 15px;
}
.review-info {
flex: 1;
}
.review-name {
font-size: 18px;
margin: 0;
color: #333;
}
.review-date {
font-size: 12px;
color: #999;
}
.review-rating {
display: flex;
align-items: center;
margin-top: 10px;
}
.star {
color: #f39c12;
margin-right: 5px;
}
.review-content {
padding: 0 20px 20px 20px;
font-size: 14px;
color: #777;
}
</style>
</head>
<body>
<div class="review-card">
<div class="review-header">
<img src="https://via.placeholder.com/50" alt="Reviewer Avatar" class="review-avatar">
<div class="review-info">
<h3 class="review-name">John Doe</h3>
<p class="review-date">August 17, 2024</p>
<div class="review-rating">
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">☆</span>
</div>
</div>
</div>
<div class="review-content">
<p>This product is amazing! It has exceeded my expectations in every way. The build quality is excellent, and it performs even better than I had hoped. Highly recommended!</p>
</div>
</div>
</body>
</html>
4. Dashboard Card - Thẻ Bảng Điều Khiển
Trong các ứng dụng web và các trang quản trị, dashboard card được sử dụng để hiển thị dữ liệu hoặc thông tin quan trọng một cách rõ ràng và dễ hiểu. Các HTML mẫu cho dashboard card thường bao gồm các biểu đồ nhỏ, số liệu thống kê, và thông báo quan trọng. Khi bạn thiết kế dashboard card, hãy chú ý đến việc tối ưu hóa bố cục để đảm bảo thông tin được hiển thị một cách trực quan và hiệu quả.
Ví Dụ HTML Mẫu Dashboard Card :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Card Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.dashboard-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
padding: 20px;
text-align: center;
margin: 20px;
transition: transform 0.3s ease;
}
.dashboard-card:hover {
transform: scale(1.05);
}
.card-title {
font-size: 18px;
color: #333;
margin-bottom: 10px;
}
.card-value {
font-size: 36px;
color: #27ae60;
margin-bottom: 10px;
}
.card-description {
font-size: 14px;
color: #777;
margin-bottom: 20px;
}
.progress-bar-container {
background-color: #e0e0e0;
border-radius: 10px;
overflow: hidden;
height: 10px;
width: 100%;
margin-bottom: 15px;
}
.progress-bar {
background-color: #27ae60;
height: 100%;
width: 75%;
}
.card-footer {
font-size: 12px;
color: #999;
}
</style>
</head>
<body>
<div class="dashboard-card">
<div class="card-title">Total Sales</div>
<div class="card-value">$12,345</div>
<div class="card-description">Compared to last month</div>
<div class="progress-bar-container">
<div class="progress-bar"></div>
</div>
<div class="card-footer">75% of target achieved</div>
</div>
</body>
</html>
5. Profile Card - Thẻ Hồ Sơ Cá Nhân
Profile Card thường được sử dụng trên các trang web giới thiệu hoặc mạng xã hội để hiển thị thông tin cá nhân hoặc chuyên nghiệp. Với thiết kế HTML hiện đại, bạn có thể dễ dàng tạo ra profile card hấp dẫn, bao gồm hình ảnh, tên, chức danh, và liên kết đến các trang mạng xã hội. Template HTML cho profile card thường rất linh hoạt và dễ tùy chỉnh để phù hợp với phong cách thiết kế tổng thể của trang web.
Ví Dụ HTML Mẫu Profile Card :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Card Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.profile-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 300px;
text-align: center;
margin: 20px;
transition: transform 0.3s ease;
}
.profile-card:hover {
transform: scale(1.05);
}
.profile-image {
width: 100%;
height: auto;
}
.profile-info {
padding: 20px;
}
.profile-avatar {
border-radius: 50%;
width: 100px;
height: 100px;
margin-bottom: 15px;
border: 5px solid #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.profile-name {
font-size: 22px;
color: #333;
margin-bottom: 5px;
}
.profile-title {
font-size: 14px;
color: #777;
margin-bottom: 15px;
}
.profile-description {
font-size: 14px;
color: #555;
margin-bottom: 20px;
}
.profile-social {
display: flex;
justify-content: center;
}
.profile-social a {
margin: 0 10px;
text-decoration: none;
color: #3498db;
font-size: 18px;
transition: color 0.3s ease;
}
.profile-social a:hover {
color: #2980b9;
}
</style>
</head>
<body>
<div class="profile-card">
<img src="https://via.placeholder.com/300x150" alt="Profile Cover" class="profile-image">
<div class="profile-info">
<img src="https://via.placeholder.com/100" alt="Profile Avatar" class="profile-avatar">
<h3 class="profile-name">John Doe</h3>
<p class="profile-title">Web Developer</p>
<p class="profile-description">Passionate about building excellent software that improves the lives of those around me. I specialize in creating software for clients ranging from individuals and small businesses all the way to large enterprise corporations.</p>
<div class="profile-social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
</body>
</html>
6. Event Card - Thẻ Sự Kiện
Event Card là lựa chọn lý tưởng để hiển thị thông tin về các sự kiện sắp tới. Khi sử dụng HTML mẫu cho event card, bạn có thể dễ dàng tích hợp ngày, giờ, địa điểm và mô tả sự kiện, kèm theo các nút đăng ký hoặc chia sẻ. Sự đơn giản và rõ ràng trong thiết kế web sẽ giúp người dùng dễ dàng nắm bắt thông tin và tham gia sự kiện.
Ví Dụ HTML Mẫu Event Card :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Card Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.event-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 300px;
text-align: center;
margin: 20px;
transition: transform 0.3s ease;
}
.event-card:hover {
transform: scale(1.05);
}
.event-image {
width: 100%;
height: auto;
}
.event-content {
padding: 20px;
}
.event-title {
font-size: 22px;
margin-bottom: 10px;
color: #333;
}
.event-date {
font-size: 14px;
color: #777;
margin-bottom: 15px;
}
.event-description {
font-size: 14px;
color: #555;
margin-bottom: 20px;
}
.event-location {
font-size: 14px;
color: #3498db;
margin-bottom: 15px;
}
.register-btn {
background-color: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s ease;
}
.register-btn:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="event-card">
<img src="https://via.placeholder.com/300x150" alt="Event Image" class="event-image">
<div class="event-content">
<h3 class="event-title">Tech Conference 2024</h3>
<p class="event-date">August 25, 2024</p>
<p class="event-location">San Francisco, CA</p>
<p class="event-description">Join us for a day of insightful talks and networking with top industry professionals.</p>
<a href="#" class="register-btn">Register Now</a>
</div>
</div>
</body>
</html>
Các thành phần chính của HTML Mẫu Event Card :
Event Image (.event-image): Hình ảnh đại diện cho sự kiện, có thể là một bức ảnh liên quan đến nội dung sự kiện.
Event Title (.event-title): Tiêu đề của sự kiện, ở đây là "Tech Conference 2024".
Event Date (.event-date): Ngày tháng diễn ra sự kiện.
Event Location (.event-location): Địa điểm tổ chức sự kiện.
Event Description (.event-description): Mô tả ngắn gọn về sự kiện, nhằm thu hút người tham gia.
Register Button (.register-btn): Nút đăng ký để người dùng có thể tham gia sự kiện.
7. Gallery Card - Thẻ Bộ Sưu Tập
Gallery Card là một phần quan trọng của các trang web nghệ thuật, nhiếp ảnh hoặc portfolio. Với template HTML chuyên dụng, gallery card có thể hiển thị hình ảnh hoặc video theo dạng lưới hoặc carousel. Thiết kế HTML của gallery card cần được tối ưu hóa để đảm bảo hình ảnh được tải nhanh và hiển thị tốt trên mọi thiết bị.
Ví Dụ HTML Mẫu Gallery Card :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery Card Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.gallery-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 320px;
margin: 20px;
transition: transform 0.3s ease;
}
.gallery-card:hover {
transform: scale(1.05);
}
.gallery-header {
background-color: #3498db;
color: #fff;
text-align: center;
padding: 10px;
font-size: 20px;
}
.gallery-images {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
}
.gallery-images img {
width: 48%;
height: auto;
margin-bottom: 10px;
border-radius: 5px;
transition: transform 0.3s ease;
}
.gallery-images img:hover {
transform: scale(1.1);
}
.gallery-footer {
padding: 10px;
text-align: center;
font-size: 14px;
color: #777;
}
</style>
</head>
<body>
<div class="gallery-card">
<div class="gallery-header">Photo Gallery</div>
<div class="gallery-images">
<img src="https://via.placeholder.com/150" alt="Gallery Image 1">
<img src="https://via.placeholder.com/150" alt="Gallery Image 2">
<img src="https://via.placeholder.com/150" alt="Gallery Image 3">
<img src="https://via.placeholder.com/150" alt="Gallery Image 4">
</div>
<div class="gallery-footer">
View more photos on our gallery page.
</div>
</div>
</body>
</html>
Các thành phần chính Của HTML Gallery Card :
Gallery Header (.gallery-header): Tiêu đề của Gallery Card, ở đây là "Photo Gallery".
Gallery Images (.gallery-images): Phần chứa các hình ảnh trong gallery, sắp xếp theo dạng lưới.
Gallery Footer (.gallery-footer): Phần mô tả ngắn gọn hoặc liên kết đến trang chứa toàn bộ gallery.
8. Statistic Card - Thẻ Thống Kê
Statistic Card giúp hiển thị các dữ liệu quan trọng dưới dạng số liệu hoặc biểu đồ. Trong thiết kế web, statistic card thường được sử dụng trong các trang báo cáo, trang quản trị hoặc các ứng dụng web liên quan đến phân tích dữ liệu. Sử dụng HTML mẫu cho statistic card có thể giúp bạn dễ dàng tạo ra các bố cục trực quan, giúp người dùng nhanh chóng hiểu được thông tin.
Ví Dụ HTML Mẫu HTML Statistic Card :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Statistic Card Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.statistic-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
padding: 20px;
text-align: center;
margin: 20px;
transition: transform 0.3s ease;
}
.statistic-card:hover {
transform: scale(1.05);
}
.statistic-title {
font-size: 18px;
color: #333;
margin-bottom: 10px;
}
.statistic-value {
font-size: 36px;
color: #27ae60;
margin-bottom: 10px;
}
.statistic-description {
font-size: 14px;
color: #777;
margin-bottom: 20px;
}
.statistic-icon {
font-size: 48px;
color: #3498db;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="statistic-card">
<div class="statistic-icon">📊</div>
<div class="statistic-title">Monthly Revenue</div>
<div class="statistic-value">$45,000</div>
<div class="statistic-description">Compared to last month</div>
</div>
</body>
</html>
Các thành phần chính Của HTML Statistic Card :
Statistic Icon (.statistic-icon): Biểu tượng đại diện cho loại dữ liệu thống kê (ở đây là một biểu đồ dạng cột).
Statistic Title (.statistic-title): Tiêu đề của thẻ thống kê, ở đây là "Monthly Revenue".
Statistic Value (.statistic-value): Giá trị chính của số liệu thống kê, ở đây là "$45,000".
Statistic Description (.statistic-description): Mô tả ngắn gọn về số liệu, cung cấp thêm ngữ cảnh hoặc so sánh.
9. Service Card - Thẻ Dịch Vụ
Service Card được thiết kế để giới thiệu các dịch vụ của doanh nghiệp hoặc cá nhân. Với template HTML phù hợp, service card có thể bao gồm tiêu đề dịch vụ, mô tả ngắn gọn, và nút CTA (Call to Action) để người dùng tìm hiểu thêm hoặc đăng ký dịch vụ. Thiết kế HTML cần đảm bảo rằng thẻ dịch vụ rõ ràng và dễ hiểu, giúp người dùng nhanh chóng đưa ra quyết định.
Ví Dụ HTML Mẫu Service Card :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Service Card Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.service-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 300px;
text-align: center;
margin: 20px;
transition: transform 0.3s ease;
}
.service-card:hover {
transform: scale(1.05);
}
.service-icon {
font-size: 48px;
color: #3498db;
margin: 20px 0;
}
.service-title {
font-size: 20px;
color: #333;
margin-bottom: 10px;
}
.service-description {
font-size: 14px;
color: #777;
margin-bottom: 20px;
padding: 0 15px;
}
.learn-more-btn {
background-color: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
display: inline-block;
margin-bottom: 20px;
transition: background-color 0.3s ease;
}
.learn-more-btn:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="service-card">
<div class="service-icon">💻</div>
<h3 class="service-title">Web Development</h3>
<p class="service-description">We offer professional web development services to help you build a strong online presence.</p>
<a href="#" class="learn-more-btn">Learn More</a>
</div>
</body>
</html>
Các thành phần chính HTML Service Card :
Service Icon (.service-icon): Biểu tượng đại diện cho dịch vụ (ở đây là biểu tượng máy tính).
Service Title (.service-title): Tiêu đề của dịch vụ, ở đây là "Web Development".
Service Description (.service-description): Mô tả ngắn gọn về dịch vụ, giải thích ngắn gọn về những gì dịch vụ cung cấp.
Learn More Button (.learn-more-btn): Nút để người dùng có thể tìm hiểu thêm chi tiết về dịch vụ.
10. Notification Card - Thẻ Thông Báo
Notification Card là một phần quan trọng của trải nghiệm người dùng, giúp thông báo cho họ về các cập nhật, cảnh báo hoặc nhắc nhở. Khi thiết kế web, bạn nên sử dụng HTML mẫu cho notification card để tạo ra các thông báo nổi bật nhưng không gây phiền hà cho người dùng. Thẻ thông báo nên được đặt ở vị trí dễ thấy và có tùy chọn đóng nếu cần.
Ví Dụ HTML Mẫu Notification Card :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notification Card Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.notification-card {
background-color: #fff;
border-left: 5px solid #e74c3c;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 320px;
padding: 20px;
margin: 20px;
transition: transform 0.3s ease;
position: relative;
}
.notification-card:hover {
transform: scale(1.05);
}
.notification-title {
font-size: 18px;
color: #333;
margin-bottom: 10px;
}
.notification-message {
font-size: 14px;
color: #777;
margin-bottom: 20px;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
background-color: #e74c3c;
color: #fff;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
cursor: pointer;
text-align: center;
line-height: 20px;
font-size: 14px;
}
.close-btn:hover {
background-color: #c0392b;
}
</style>
</head>
<body>
<div class="notification-card">
<button class="close-btn">×</button>
<h3 class="notification-title">System Alert</h3>
<p class="notification-message">Your subscription will expire in 3 days. Please renew to continue enjoying our services without interruption.</p>
</div>
</body>
</html>
Các thành phần chính Của HTML Notification Card :
Notification Title (.notification-title): Tiêu đề của thẻ thông báo, giúp làm nổi bật nội dung chính của thông báo.
Notification Message (.notification-message): Nội dung chi tiết của thông báo, giải thích thêm về vấn đề hoặc sự kiện.
Close Button (.close-btn): Nút để người dùng có thể đóng thẻ thông báo.
11. Social Media Card - Thẻ Mạng Xã Hội.
Social Media Card giúp hiển thị nội dung từ các mạng xã hội như bài đăng, tweet, hoặc video. Thiết kế HTML cho social media card thường bao gồm các nút tương tác như "Thích", "Chia sẻ", hoặc "Bình luận". Template HTML cho loại thẻ này thường được tối ưu hóa để dễ dàng tích hợp và hiển thị tốt trên mọi nền tảng web.
Ví Dụ HTML Mẫu Social Media Card :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Card Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.social-media-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 300px;
text-align: center;
margin: 20px;
transition: transform 0.3s ease;
}
.social-media-card:hover {
transform: scale(1.05);
}
.social-media-header {
background-color: #3498db;
color: #fff;
padding: 10px;
font-size: 18px;
}
.social-media-content {
padding: 20px;
}
.social-media-avatar {
border-radius: 50%;
width: 80px;
height: 80px;
margin-bottom: 10px;
border: 4px solid #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.social-media-name {
font-size: 16px;
color: #333;
margin-bottom: 5px;
}
.social-media-handle {
font-size: 14px;
color: #777;
margin-bottom: 15px;
}
.social-media-message {
font-size: 14px;
color: #555;
margin-bottom: 20px;
}
.social-media-footer {
display: flex;
justify-content: space-around;
padding: 10px;
background-color: #f7f7f7;
}
.social-media-footer a {
text-decoration: none;
color: #3498db;
font-size: 18px;
transition: color 0.3s ease;
}
.social-media-footer a:hover {
color: #2980b9;
}
</style>
</head>
<body>
<div class="social-media-card">
<div class="social-media-header">
</div>
<div class="social-media-content">
<img src="https://via.placeholder.com/80" alt="User Avatar" class="social-media-avatar">
<h3 class="social-media-name">John Doe</h3>
<p class="social-media-handle">@johndoe</p>
<p class="social-media-message">Excited to share the launch of our new product! Check it out and let me know what you think.</p>
</div>
<div class="social-media-footer">
<a href="#"><i class="fa fa-thumbs-up"></i> Like</a>
<a href="#"><i class="fa fa-comment"></i> Comment</a>
<a href="#"><i class="fa fa-share"></i> Share</a>
</div>
</div>
</body>
</html>
Các thành phần chính HTML Social Media Card :
Social Media Header (.social-media-header): Phần đầu của card, thường chứa tên của mạng xã hội.
Social Media Avatar (.social-media-avatar): Ảnh đại diện của người dùng, thường là hình tròn.
Social Media Name (.social-media-name): Tên thật của người dùng.
Social Media Handle (.social-media-handle): Tên tài khoản trên mạng xã hội.
Social Media Message (.social-media-message): Nội dung bài đăng hoặc thông điệp của người dùng.
Social Media Footer (.social-media-footer): Chứa các nút tương tác như "Like", "Comment", "Share".
12. Feature Card - Thẻ Tính Năng
Feature Card là công cụ tuyệt vời để giới thiệu các tính năng hoặc ưu điểm chính của sản phẩm hoặc dịch vụ. Sử dụng HTML mẫu cho feature card sẽ giúp bạn nhanh chóng tạo ra các bố cục gọn gàng và chuyên nghiệp, làm nổi bật những lợi ích mà sản phẩm hoặc dịch vụ của bạn mang lại.
Ví Dụ HTML Mẫu Feature Card :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feature Card Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.feature-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 300px;
text-align: center;
margin: 20px;
transition: transform 0.3s ease;
padding: 20px;
}
.feature-card:hover {
transform: scale(1.05);
}
.feature-icon {
font-size: 48px;
color: #e67e22;
margin-bottom: 15px;
}
.feature-title {
font-size: 22px;
color: #333;
margin-bottom: 10px;
}
.feature-description {
font-size: 14px;
color: #777;
margin-bottom: 20px;
padding: 0 15px;
}
.learn-more-btn {
background-color: #e67e22;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s ease;
}
.learn-more-btn:hover {
background-color: #d35400;
}
</style>
</head>
<body>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3 class="feature-title">Fast Performance</h3>
<p class="feature-description">Our service is optimized to deliver lightning-fast performance, ensuring a seamless experience for users.</p>
<a href="#" class="learn-more-btn">Learn More</a>
</div>
</body>
</html>
Các thành phần chính Feature Card :
Feature Icon (.feature-icon): Biểu tượng đại diện cho tính năng (ở đây là biểu tượng tia sét).
Feature Title (.feature-title): Tiêu đề của tính năng, ở đây là "Fast Performance".
Feature Description (.feature-description): Mô tả ngắn gọn về tính năng, giải thích ngắn gọn về những gì tính năng cung cấp.
Learn More Button (.learn-more-btn): Nút để người dùng có thể tìm hiểu thêm chi tiết về tính năng.
13. Contact Card - Thẻ Liên Hệ
Contact Card là thẻ cần thiết trên các trang liên hệ, giúp hiển thị thông tin liên hệ như địa chỉ email, số điện thoại, và liên kết đến bản đồ. Với template HTML phù hợp, contact card có thể dễ dàng tùy chỉnh để phù hợp với phong cách thiết kế tổng thể của trang web, đồng thời đảm bảo thông tin liên hệ rõ ràng và dễ tiếp cận.
Ví Dụ HTML Mẫu Contact Card :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Card Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.contact-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
padding: 20px;
text-align: center;
margin: 20px;
transition: transform 0.3s ease;
}
.contact-card:hover {
transform: scale(1.05);
}
.contact-avatar {
border-radius: 50%;
width: 100px;
height: 100px;
margin-bottom: 15px;
border: 5px solid #3498db;
}
.contact-name {
font-size: 20px;
color: #333;
margin-bottom: 5px;
}
.contact-title {
font-size: 14px;
color: #777;
margin-bottom: 15px;
}
.contact-info {
font-size: 14px;
color: #555;
margin-bottom: 10px;
}
.contact-info a {
color: #3498db;
text-decoration: none;
transition: color 0.3s ease;
}
.contact-info a:hover {
color: #2980b9;
}
.contact-social {
display: flex;
justify-content: center;
margin-top: 15px;
}
.contact-social a {
margin: 0 10px;
text-decoration: none;
color: #3498db;
font-size: 18px;
transition: color 0.3s ease;
}
.contact-social a:hover {
color: #2980b9;
}
</style>
</head>
<body>
<div class="contact-card">
<img src="https://via.placeholder.com/100" alt="Contact Avatar" class="contact-avatar">
<h3 class="contact-name">Jane Doe</h3>
<p class="contact-title">Software Engineer</p>
<p class="contact-info"><a href="mailto:jane.doe@example.com">jane.doe@example.com</a></p>
<p class="contact-info"><a href="tel:+1234567890">+1 234 567 890</a></p>
<div class="contact-social">
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-github"></i></a>
</div>
</div>
</body>
</html>
Các thành phần chính của HTML Contact Card :
Contact Avatar (.contact-avatar): Ảnh đại diện của người liên hệ, thường được định dạng hình tròn.
Contact Name (.contact-name): Tên của người liên hệ.
Contact Title (.contact-title): Chức danh hoặc nghề nghiệp của người liên hệ.
Contact Info (.contact-info): Thông tin liên hệ bao gồm email và số điện thoại, kèm liên kết cho phép gửi email hoặc gọi điện trực tiếp.
Contact Social (.contact-social): Liên kết đến các trang mạng xã hội của người liên hệ, được bố trí ngang.
14. Pricing Card - Thẻ Giá
Pricing Card được sử dụng để hiển thị các gói giá của sản phẩm hoặc dịch vụ, bao gồm các tính năng và giá cả cụ thể. Thiết kế HTML cho pricing card cần phải rõ ràng và dễ so sánh, giúp người dùng nhanh chóng đưa ra quyết định mua sắm. Sử dụng HTML mẫu cho pricing card sẽ giúp bạn dễ dàng tạo ra các bảng giá chuyên nghiệp và thu hút.
Ví Dụ HTML Mẫu Pricing Card :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing Card Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.pricing-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
margin: 20px;
transition: transform 0.3s ease;
padding: 20px;
}
.pricing-card:hover {
transform: scale(1.05);
}
.pricing-title {
font-size: 24px;
color: #333;
margin-bottom: 10px;
}
.pricing-price {
font-size: 36px;
color: #e67e22;
margin-bottom: 20px;
}
.pricing-period {
font-size: 14px;
color: #777;
margin-bottom: 20px;
}
.pricing-features {
text-align: left;
margin-bottom: 20px;
}
.pricing-features li {
font-size: 14px;
color: #555;
margin-bottom: 10px;
list-style-type: none;
padding-left: 20px;
position: relative;
}
.pricing-features li:before {
content: '✔';
color: #e67e22;
position: absolute;
left: 0;
}
.buy-now-btn {
background-color: #e67e22;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s ease;
}
.buy-now-btn:hover {
background-color: #d35400;
}
</style>
</head>
<body>
<div class="pricing-card">
<h3 class="pricing-title">Basic Plan</h3>
<p class="pricing-price">$19.99</p>
<p class="pricing-period">per month</p>
<ul class="pricing-features">
<li>10 GB Storage</li>
<li>100 GB Bandwidth</li>
<li>24/7 Support</li>
<li>Basic Analytics</li>
</ul>
<a href="#" class="buy-now-btn">Buy Now</a>
</div>
</body>
</html>
Ví Dụ HTML Mẫu Pricing Card :
Các thành phần chính HTML Pricing Card :
Pricing Title (.pricing-title): Tiêu đề của gói dịch vụ, ở đây là "Basic Plan".
Pricing Price (.pricing-price): Giá của gói dịch vụ, ở đây là "$19.99".
Pricing Period (.pricing-period): Thời gian áp dụng của giá (ví dụ: "per month").
Pricing Features (.pricing-features): Danh sách các tính năng bao gồm trong gói dịch vụ.
Buy Now Button (.buy-now-btn): Nút để người dùng có thể mua hoặc đăng ký gói dịch vụ.
Kết Luận
Thiết kế dạng thẻ (Card) không chỉ là một xu hướng trong thiết kế web, mà còn là một công cụ mạnh mẽ giúp tối ưu hóa trải nghiệm người dùng. Từ Product Card đến Pricing Card, mỗi loại thẻ đều có vai trò quan trọng trong việc tổ chức và hiển thị thông tin trên trang web hoặc blog cá nhân của bạn. Sử dụng các template HTML phù hợp, bạn có thể tạo ra những thiết kế HTML đẹp mắt và hiệu quả, góp phần nâng cao giá trị nội dung và thu hút người dùng.
