Tutorial: How to Create Cards UI with CSS & HTML

Cards Demo
Cards Demo

In this short tutorial I’m going to show you how to create cards, they are trending for quite some time now and I thought it would be a good idea to write about them. For this example I’m only using HTML and CSS, my goal here is to just show you how to create the design. Please let me know in the comments if you want another post on how to add animations and some functionalities to it.

So first let’s create our HTML structure, as you can see in the image above, our cards will be composed of an image and a description containing a title and a small text. This is how it should look like in code:

<div class="card">
   <img src="img.jpg" >
   <div class="description">
      <h4 class="title"><b>magna tincidunt et</b></h4> 
         <p class="text">Nam nec lorem eu nibh aliquam egestas non lobortis neque. 
            Ut tristique tortor sem, eget tristique lectus consectetur id. 
            Vivamus sem metus, fermentum in orci ut, rhoncus semper tellus. 
            Praesent eget porttitor metus. Phasellus a ipsum vulputate, cursus massa eu, 
            tincidunt purus. Curabitur auctor vulputate velit</p> 
   </div>
</div>

Don’t forget to pick an image and specify it on the img src attribute. Now we already have our card, it’s not very pretty, though. Let’s add some style to it:

.title, .text{
   font-family: verdana;
   font-size: 12px;
}
 
.title{
   margin-bottom: 0px;
}
 
.text{
   margin-top: 5px;
}
.card {
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   transition: 0.3s;
   width: 300px;
   margin: 3px;
   float: left;
}
 
.card:hover {
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
 
.description {
   padding: 2px 16px;
}
 
.card img{
   width:100%;
}

Now just add this CSS to your page. I styled my card this way but feel free to edit this CSS as you like.

That’s it guys! We’ve created a very basic card, as I said before let me know in the comments what functionalities do you want it to have.

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>