How to Build Responsive Pricing Cards With CSS Variables

Building responsive pricing cards is essential for any business looking to display its services or products effectively. CSS variables, also known as custom properties, make this task easier and more flexible. In this guide, we'll explore how to create stunning responsive pricing cards using CSS variables, ensuring they look great on any device.

Step 1: Setting Up the HTML Structure

Start by creating the basic HTML structure for your pricing cards. A simple layout typically includes a container with individual card elements. Use semantic HTML to enhance clarity and accessibility.



    
        Basic Plan
        $10/month
        
            Feature 1
            Feature 2
            Feature 3
        
        
    
    
        Pro Plan
        $20/month
        
            Feature 1
            Feature 2
            Feature 3
            Feature 4
        
        
    
    
        Premium Plan
        $30/month
        
            Feature 1
            Feature 2
            Feature 3
            Feature 4
            Feature 5

Step 2: Adding CSS Variables for Flexibility

Next, let’s define some CSS variables in the root of your stylesheet. Variables make it easier to maintain and change the styling of your pricing cards.


:root {
    --card-bg-color: white;
    --card-text-color: #333;
    --card-border-color: #ddd;
    --card-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    --button-bg-color: #007bff;
    --button-text-color: white;
    --button-hover-bg-color: #0056b3;
}

Step 3: Designing Your Pricing Cards

Now, apply your CSS styles to create visually appealing and responsive cards. Use the CSS variables you defined earlier to maintain consistency.


.pricing-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 20px;
}
.pricing-card {
    background: var(--card-bg-color);
    color: var(--card-text-color);
    border: 1px solid var(--card-border-color);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    margin: 20px;
    padding: 20px;
    text-align: center;
    flex: 1 0 300px; /* Allows the card to grow and shrink */
    transition: transform 0.3s;
}
.pricing-card:hover {
    transform: translateY(-5px);
}
.price {
    font-size: 2em;
    margin: 15px 0;
}
button {
    background: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.3s;
}
button:hover {
    background: var(--button-hover-bg-color);
}

Step 4: Making It Responsive

To ensure your pricing cards are responsive, utilize CSS media queries. This will adjust styles for different screen sizes while using the defined CSS variables.


@media (max-width: 768px) {
    .pricing-container {
        flex-direction: column;
        align-items: center;
    }
.pricing-card {
        width: 80%; /* On smaller screens, cards take up more space */
        margin: 10px 0;
    }
}

Conclusion

By utilizing CSS variables

How to Build Responsive Pricing Cards With CSS Variables