Playing with CSS Cards

New design trends are coming everyday. Card layout in CSS has been a very popular layout type in the recent times and many companies like Google are using card layout in their designs. We will try to create a card layout in this short tutorial.

- Prerequisites :

Basic knowledge of HTML and CSS. Flexbox will be our friend in layout.

1) Basic file structure -

The basic project structure will go as below :

Project Directory

|-index.html

|-style.css

2)Basic html -


<!--index.html-->
<!DOCTYPE html>
<html>
    <head>
    	<title>CSS Cards</title>
    	<link rel="stylesheet" href="style.css"> <!--CSS link-->
    </head>
    <body>
    	<div id="container">
            <div class="card one">
            	Card 1
            </div>
            <div class="card two">
            	Card 2
            </div>
            <div class="card three">
            	Card 3
            </div>
        </div>
    </body>
</html>

The basic structure is quite familiar with us. The div#container is the container which will hold our cards. The three div.card are our cards. So our markup is ready and we will head towards the styling.

As I said, flexbox will be our friend in styling. The basic styling is as below -


*{
	margin: 0px;
	box-sizing: border-box;
	font-family:sans-serif;
}

#container{
	height: 100vh;
	display: flex;
	padding: 2rem;
	justify-content: space-evenly;
	align-items: center;
}

.card{
        width: 30%;
        height: 70%;
        padding: 1rem;
        border: 10px solid black;
        font-weight: bold;
        font-size: 3rem;
}

So, our container is a flex container and each card is a flex child with height of 70% and width of 30%. The current view of the file is as below -

So, we have built our first ever cards. Although they don't have a very good aesthetic look for now, but we can manage it by adding more styles.

So first of all let's remove all the dull looking borders and have a beautiful gradient for the background of each card. I have selected three gradients for our cards. You can create a gradient yourself, or select anyone from the huge stock of gradients here. Remember, we have assigned a unique class to each card, we will use them to apply gradients for each card. We will also change the color of text in the cards. So the code goes below -


/*style.css (continued)*/

.card{
	/*remove border property*/
        color: ghostwhite;
}

.one{
	background-image: linear-gradient(to bottom right, #5433ff, #20bdff, #a5fecb);
}

.two{
	background-image: linear-gradient(to bottom right, #f12711, #f5af19);
}

.three{
	background-image: linear-gradient(to bottom right, #8a2387, #e94057, #f27121);
}

So, the look has quite changed now. We have made our cards colourful. The last thing left in this tutorial - the text in the card is not centered. We will use flexbox to solve it in three lines of code.


/*style.css (continued)*/

.card{
    display: flex;
    justify-content: center;
    align-items: center;
}

So, our cards are finally ready. below is an embed for you to look at what we have built today.

Nice! Isn't it? Here is our completed and final css for your reference (HTML will remain same as in the beginning snippet)-


*{
	margin: 0px;
	box-sizing: border-box;
	font-family:sans-serif;
}

#container{
	height: 100vh;
	display: flex;
	padding: 2rem;
	justify-content: space-evenly;
	align-items: center;
}

.card{
	width: 30%;
	height: 70%;
	padding: 1rem;
	font-weight: bold;
	font-size: 3rem;
	color: ghostwhite;
	display: flex;
        justify-content: center;
        align-items: center;
}

.one{
	background-image: linear-gradient(to bottom right, #5433ff, #20bdff, #a5fecb);
}

.two{
	background-image: linear-gradient(to bottom right, #f12711, #f5af19);
}

.three{
	background-image: linear-gradient(to bottom right, #8a2387, #e94057, #f27121);
}

So it's all for now. I will be back in another tutorial extending our discussion in this tutorial to make 3D effects and some practical use cases of CSS Cards. Till then, Happy Coding!

Code With Praneet

Search This Blog

My Toolkit