In this blog, we’ll explore how to create a visually appealing card layout using HTML and CSS. This design features image boxes with icon links and a clean, modern aesthetic, perfect for showcasing content like branding, marketing, and packaging. Let’s dive into the code and understand how to bring this layout to life.
HTML Structure
The HTML structure for our card layout is straightforward. We have a container holding three cards, each consisting of an image, a title, a description, and a list of tags. Here’s the complete HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Card Layout</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</head>
<body>
<section>
<div class="container">
<div class="card">
<div class="card-inner" style="--clr:#fff;">
<div class="box">
<div class="imgBox">
<img src="https://images.unsplash.com/photo-1601049676869-702ea24cfd58?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Trust & Co.">
</div>
<div class="icon">
<a href="#" class="iconBox">
<span class="material-symbols-outlined">arrow_outward</span>
</a>
</div>
</div>
</div>
<div class="content">
<h3>trust & co.</h3>
<p>Fill out the form and the algorithm will offer the right team of experts</p>
<ul>
<li style="--clr-tag:#d3b19a;" class="branding">branding</li>
<li style="--clr-tag:#70b3b1;" class="packaging">packaging</li>
</ul>
</div>
</div>
<!-- Repeat similar structure for other cards -->
</div>
</section>
</body>
</html>
CSS Styling
The magic happens in the CSS, where we define the layout, colors, and interactions for our card components. The following CSS rules apply the styles:
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #fff;
font-family: "Lato", sans-serif;
font-weight: 400;
}
section {
width: calc(min(76.5rem, 90%));
margin-inline: auto;
color: #111;
}
.container {
margin-top: 5em;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 2rem;
}
.card-inner {
position: relative;
width: inherit;
height: 18.75rem;
background: var(--clr);
border-radius: 1.25rem;
border-bottom-right-radius: 0;
overflow: hidden;
}
.imgBox {
position: absolute;
inset: 0;
}
.imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
}
.icon {
position: absolute;
bottom: -0.375rem;
right: -0.375rem;
width: 6rem;
height: 6rem;
background: var(--clr);
border-top-left-radius: 50%;
}
.iconBox {
position: absolute;
inset: 0.625rem;
background: #282828;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s;
}
.iconBox span {
color: #fff;
font-size: 1.5rem;
}
.iconBox:hover {
transform: scale(1.1);
}
/* Additional content and tag styles */
.content {
padding: 0.938rem 0.625rem;
}
.content h3 {
text-transform: capitalize;
font-size: clamp(1.5rem, 1.8273rem, 1.8rem);
}
.content p {
margin: 0.625rem 0 1.25rem;
color: #565656;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.625rem;
}
ul li {
text-transform: uppercase;
background: var(--clr-tag);
color: #282828;
font-weight: 700;
font-size: 0.8rem;
padding: 0.375rem 0.625rem;
border-radius: 0.188rem;
}
.branding {
color: #704a31;
}
.packaging {
color: #1e3938;
}
.marketing {
color: #4d1637;
}
Breakdown of Key Elements
- Container and Grid Layout: The
.container
class utilizes CSS Grid to create a flexible layout that adapts to different screen sizes. Each card is placed in a grid cell. - Card Inner and Image Box: The
.card-inner
class wraps the card content, including the image and icon. The image is set to cover the entire.imgBox
, ensuring a clean, edge-to-edge visual. - Icon Styling: The icon in the bottom-right corner adds a dynamic element to the card. It enlarges slightly on hover, inviting interaction.
- Content and Tags: The text content is styled for readability, with bold, uppercase tags that visually categorize the card’s theme (e.g., branding, marketing).
Conclusion
This card layout design showcases a polished, professional look that can be easily adapted to various projects. By combining CSS Grid for layout and custom styles for content, you can create an engaging, responsive card display that enhances your web design projects.
Feel free to experiment with different images, colors, and content to make this layout your own!
Checkout our image slider article : – Dynamic Backgrounds with a 4-Tile Image Slider