DEV Community

Drishti Saraf
Drishti Saraf

Posted on • Edited on

3-Column Preview Card Component

#webdev #beginners #tutorial #learning

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! 🚀

Top comments (0)