DEV Community

Drishti Saraf
Drishti Saraf

Posted on • Edited on

4

3-Column Preview Card Component

Creating visually appealing and functional components is an essential skill for front-end developers. In this blog, I’ll guide you through how I built a 3-Column Preview Card Component using HTML and CSS. This project helped me refine my layout, styling, and responsiveness skills while teaching me valuable best practices.

3 column layout design

Overview

The 3-Column Preview Card Component is perfect for showcasing products, services, or features. It features:

  • A clean and modern layout with three distinct columns.
  • Clear visual hierarchy using bold headings, concise descriptions, and icons.
  • Responsive design for seamless viewing across devices.

Project Structure

The project comprises a single HTML file, a CSS stylesheet, and assets like icons and fonts. Here’s the folder structure:

3-column-preview-card/  
├── index.html  
├── style.css  
├── images/  
│   ├── icon-sedans.svg  
│   ├── icon-suvs.svg  
│   └── icon-luxury.svg  
└── README.md  
Enter fullscreen mode Exit fullscreen mode

The HTML Layout
The component consists of three columns, each representing a feature or category. Each column includes an icon, a heading, a description, and a call-to-action button.

Here’s the HTML structure:

<div class="card-container">  
  <div class="card sedan">  
    <img src="./images/icon-sedans.svg" alt="Sedans Icon" />  
    <h1>Sedans</h1>  
    <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>  
    <button>Learn More</button>  
  </div>  

  <div class="card suv">  
    <img src="./images/icon-suvs.svg" alt="SUVs Icon" />  
    <h1>SUVs</h1>  
    <p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.</p>  
    <button>Learn More</button>  
  </div>  

  <div class="card luxury">  
    <img src="./images/icon-luxury.svg" alt="Luxury Icon" />  
    <h1>Luxury</h1>  
    <p>Experience the pinnacle of comfort and style with our luxury options. Arrive in style wherever you go.</p>  
    <button>Learn More</button>  
  </div>  
</div>  
Enter fullscreen mode Exit fullscreen mode

Styling with CSS

  1. Setting Up Variables CSS variables help maintain consistency across the design.
   :root {  
   --bright-orange: hsl(31, 77%, 52%);  
   --dark-cyan: hsl(184, 100%, 22%);  
   --very-dark-cyan: hsl(179, 100%, 13%);  
   --light-gray: hsl(0, 0%, 95%);  
   --white: hsl(0, 0%, 100%);  
    }  
Enter fullscreen mode Exit fullscreen mode
  1. Designing the Layout The .card-container is a Flexbox container to align the three columns side by side. Each column has a distinct background color for visual separation.
   body {  
   display: grid;  
   place-content: center;  
   min-height: 100vh;  
   background-color: var(--light-gray);  
   margin: 0;  
   font-family: 'Lexend Deca', sans-serif;  
    }  

   .card-container {  
   display: flex;  
   border-radius: 10px;  
   overflow: hidden;  
   max-width: 960px;  
   margin: 0 auto;  
    }  

   .card {  
    flex: 1;  
   padding: 2rem;  
   color: var(--white);  
   text-align: center;  
    }  

  .sedan { background-color: var(--bright-orange); }  
  .suv { background-color: var(--dark-cyan); }  
  .luxury { background-color: var(--very-dark-cyan); }  
Enter fullscreen mode Exit fullscreen mode
  1. Making It Responsive
    Use media queries to stack the columns on smaller screens.

    @media (max-width: 768px) {  
     .card-container {  
      flex-direction: column;  
     }  
    
     .card {  
    padding: 1.5rem;  
      }  
     }  
    

Conclusion

Building a 3-Column Preview Card Component is an excellent way to practice modern CSS techniques like Flexbox, variables, and responsive design.

Check out the live version here.https://prismatic-heliotrope-6d66a2.netlify.app/

Check out the entire code here. https://github.com/drishti1920/Frontend-Mentor-Challenges/tree/main/3-column-layout

I hope this guide helps you improve your front-end skills. Let me know your thoughts or share your creations in the comments! 🚀

Gen AI apps are built with MongoDB Atlas

Gen AI apps are built with MongoDB Atlas

MongoDB Atlas is the developer-friendly database for building, scaling, and running gen AI & LLM apps—no separate vector DB needed. Enjoy native vector search, 115+ regions, and flexible document modeling. Build AI faster, all in one place.

Start Free

Top comments (0)

Build gen AI apps that run anywhere with MongoDB Atlas

Build gen AI apps that run anywhere with MongoDB Atlas

MongoDB Atlas bundles vector search and a flexible document model so developers can build, scale, and run gen AI apps without juggling multiple databases. From LLM to semantic search, Atlas streamlines AI architecture. Start free today.

Start Free

👋 Kindness is contagious

Take a moment to explore this thoughtful article, beloved by the supportive DEV Community. Coders of every background are invited to share and elevate our collective know-how.

A heartfelt "thank you" can brighten someone's day—leave your appreciation below!

On DEV, sharing knowledge smooths our journey and tightens our community bonds. Enjoyed this? A quick thank you to the author is hugely appreciated.

Okay